grid-column-gap
La propiedad CSS grid-column-gap
especifica el gutter entre grid columns.
css
/* <length> values */
grid-column-gap: 20px;
grid-column-gap: 1em;
grid-column-gap: 3vmin;
grid-column-gap: 0.5cm;
/* <percentage> value */
grid-column-gap: 10%;
/* Global values */
grid-column-gap: inherit;
grid-column-gap: initial;
grid-column-gap: unset;
El efecto es como si las grid lines afectadas adquieren una anchura específica: Los grid track entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.
Valor inicial | normal |
---|---|
Applies to | multi-column elements, flex containers, grid containers |
Heredable | no |
Percentages | refer to corresponding dimension of the content area |
Valor calculado | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
Animation type | a length, percentage or calc(); |
Syntax
Valores
<length-percentage>
-
Es el ancho del canal que separa las columnas de la grilla.
<percentage>
valores son relativos a la dimensión del elemento.
Sintaxis formal
column-gap =
normal |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Ejemplo
HTML
html
<div id="grid">
<div></div>
<div></div>
<div></div>
</div>
CSS
css
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
grid-column-gap: 20px;
}
#grid > div {
background-color: lime;
}
Especificaciones
Specification |
---|
CSS Box Alignment Module Level 3 # column-row-gap |
CSS Grid Layout Module Level 2 # gutters |
CSS Multi-column Layout Module Level 1 # column-gap |
Compatibilidad en navegadores
BCD tables only load in the browser
Ver también
- Propiedades CSS relacionadas:
grid-row-gap
,grid-gap
- Guía sobre CSS Grid Layout: Conceptos básicos sobre CSS Grid Layout - Gutters