This page was translated from English by the community. Learn more and join the MDN Web Docs community.

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 (en-US)), y relativas a gutter (grid-column-gap y grid-row-gap (en-US)) 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:
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete

Sintaxis

Valores

<'grid-template'>
Define el grid-template (en-US) 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 (en-US) 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 (en-US) 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

grid = 
  <'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
La definición de 'grid' en esta especificación.		 Candidate Recommendation Definición inicial

Compatibilidad en navegadores

BCD tables only load in the browser

Ver también