Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
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 octubre de 2017.
Resumen
La propiedad CSSgrid-gap es una propiedad abreviadashorthand paragrid-row-gap ygrid-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> <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
See also
- Related CSS properties:
grid-row-gap,grid-column-gap - Grid Layout Guide:Basic concepts of grid layout - Gutters