grid

La propiedad CSS grid es un shorthand que permite definir todas las propiedades grid explícitas (grid-template-rows, grid-template-columns, y grid-template-areas), implícitas (grid-auto-rows, grid-auto-columns, y grid-auto-flow), y relativas a gutter (grid-column-gap y grid-row-gap) en una sola declaración.

/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

Nota: Sólo se pueden especificar las propiedades explícitas o bien las propiedades implícitas en una sola declaración grid. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo.

Valor inicialas each of the properties of the shorthand:
Applies togrid containers
Heredableno
Percentagesas each of the properties of the shorthand:
Mediavisual
Valor calculadoas each of the properties of the shorthand:
  • grid-template-rows: as specified, but with relative lengths converted into absolute lengths
  • grid-template-columns: as specified, but with relative lengths converted into absolute lengths
  • grid-template-areas: como se especifica
  • grid-auto-rows: the percentage as specified or the absolute length
  • grid-auto-columns: the percentage as specified or the absolute length
  • grid-auto-flow: como se especifica
  • grid-column-gap: the percentage as specified or the absolute length
  • grid-row-gap: the percentage as specified or the absolute length
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Valores

<'grid-template'>
Define el grid-template incluyendo grid-template-columns, grid-template-rows y grid-template-areas.
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
Implementa un auto-flow asignando los row tracks explícitamente mediante grid-template-rows (definiendo grid-template-columns en none) y especificando como auto-repetir los column tracks mediante grid-auto-columns (definiendo grid-auto-rows en auto). grid-auto-flow es seteado en column en consecuencia, con dense si se especifica.
Todas las otras sub-propiedades de grid se redefinen a sus valores iniciales.
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Implementa un auto-flow asignando los column tracks explícitamente mediante grid-template-columns (definiendo grid-template-rows en none) y especificando como auto-repetir los row tracks mediante grid-auto-rows (definiendo grid-auto-columns en auto). grid-auto-flow es seteado en row en consecuencia, con dense si se especifica.
Todas las otras sub-propiedades de grid se redefinen a sus valores iniciales.

Sintaxis formal

Ejemplo

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Resultado

Especificaciones

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

Compatibilidad en navegadores

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] 10.1
Característica Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 57.0[1] 57.0[1] 52.0 (52.0)[2] Sin soporte[3] 10.3

[1] Implementado detrás del flag experimental Web Platform features en chrome://flags desde Chrome 29.0.

[2] Implementado detrás de la preferencia layout.css.grid.enabled desde Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), false por defecto. Desde Gecko 52.0 true por defecto.

[3] Internet Explorer y Edge implementan una version antigua de la especificación, que no define el shorthand grid. Ver el pedido para actualizar la implementación.

[4] Implementado detrás del flag Enable experimental Web Platform features en chrome://flags desde Opera 28.0.

Ver también