We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 inicialas each of the properties of the shorthand:
Applies togrid containers
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

/* 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

<'grid-row-gap'> <'grid-column-gap'>?

Ejemplo

Contenido HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Contenido CSS

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-gap: 20px 5px;
}

#grid > div {
  background-color: lime;
}

Especificaciones

Especificación Estado Comentario
CSS Grid Layout
La definición de 'grid-gap' en esta especificación.
Candidate Recommendation definición inicial

Compatibilidad del navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 57.0[1] Sin soporte[3] 52.0 (52.0)[2] Sin soporte[3] 44[4] Sin soporte[6]
<porcentaje> valor Sin soporte Sin soporte[3] 52.0 (52.0)[2] Sin soporte[3] Sin soporte[4] Sin soporte[6]
Característica Vista web de Android Chrome para Android Firefox Móvil (Gecko) IE Móvil Opera Móvil Safari Móvil
Basic support 57.0[1] 57.0[1] ? 52.0 (52.0)[3] 44 ?
<porcentaje> value Sin soporte Sin soporte 52.0 (52.0)[5] Sin soporte Sin soporte Sin soporte

[1] Implementado bajo la plataforma web experimental de características de etiquetas en chrome://flags since Chrome 29.0.

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) it is enabled by default.

[3] Internet Explorer implements an older version of the specification, which didn't define this property.

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

[5] Implemented behind the preference layout.css.grid.enabled since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) it is enabled by default.

[6] Experimental implementation available in Safari Technological Preview.

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: ireneml.fr
Última actualización por: ireneml.fr,