grid-gap
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
Resumen
La propiedad CSS grid-gap
es una propiedad abreviada shorthand para grid-row-gap
y grid-column-gap
que especifica los canales entre las filas y las columnas de la cuadrícula.
Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.
Valor inicial | as each of the properties of the shorthand:
|
---|---|
Applies to | multi-column elements, flex containers, grid containers |
Heredable | no |
Valor calculado | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Sintaxis
css
/* Un valor <longitud> */
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;
/* Un valor <porcentaje> */
grid-gap: 16%;
grid-gap: 100%;
/* Dos valores <longitud> */
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;
/* Uno o dos valores <porcentaje> */
grid-gap: 16% 100%;
grid-gap: 21px 82%;
/* Valores Globales */
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;
Valores
<longitud>
-
Es el ancho del calalón que separa las lineas de las rejillas.
<percentage>
-
Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.
Sintaxis formal
gap =
<'row-gap'> <'column-gap'>?
<row-gap> =
normal |
<length-percentage [0,∞]>
<column-gap> =
normal |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Ejemplo
Contenido HTML
html
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
css
#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: 20px 5px;
}
#grid > div {
background-color: lime;
}
Especificaciones
Specification |
---|
CSS Box Alignment Module Level 3 # gap-shorthand |
Compatibilidad con navegadores
BCD tables only load in the browser
See also
- Related CSS properties:
grid-row-gap
,grid-column-gap
- Grid Layout Guide: Basic concepts of grid layout - Gutters