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 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: `row-gap`: `normal` `column-gap`: `normal`
Applies to	multi-column elements, flex containers, grid containers
Heredable	no
Valor calculado	as each of the properties of the shorthand: `row-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation type	as each of the properties of the shorthand: `row-gap`: a length, percentage or calc(); `column-gap`: a length, percentage or calc();

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

Help improve MDN

Learn how to contribute

This page was last modified on 1 ene 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content