MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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 setean a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se resetean mediante este shorthand, incluso cuando no pueden ser seteadas 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:
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintáxis

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 (seteando grid-template-columns en none) y especificando como auto-repetir los column tracks mediante grid-auto-columns (seteando 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 resetean 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 (seteando grid-template-rows en none) y especificando como auto-repetir los row tracks mediante grid-auto-rows (seteando 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 resetean a sus valores iniciales.

Sintáxis formal

<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

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
The definition of 'grid' in that specification.
Candidate Recommendation Initial definition

Compatibilidad en navegadores

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 57.0[1] No support[3] 52.0 (52.0)[2] No support[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] No support[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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: andresrisso
 Última actualización por: andresrisso,