grid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

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.

css

/* <'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 inicial	as each of the properties of the shorthand: `grid-template-rows`: `none` `grid-template-columns`: `none` `grid-template-areas`: `none` `grid-auto-rows`: `auto` `grid-auto-columns`: `auto` `grid-auto-flow`: `row` `grid-column-gap`: `0` `grid-row-gap`: `0` `column-gap`: `normal` `row-gap`: `normal`
Applies to	grid containers
Heredable	no
Percentages	as each of the properties of the shorthand: `grid-template-rows`: refer to corresponding dimension of the content area `grid-template-columns`: refer to corresponding dimension of the content area `grid-auto-rows`: refer to corresponding dimension of the content area `grid-auto-columns`: refer to corresponding dimension of the content area
Valor calculado	as 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 type	as each of the properties of the shorthand: `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list `grid-template-areas`: discrete `grid-auto-rows`: by computed value type `grid-auto-columns`: by computed value type `grid-auto-flow`: discrete `grid-column-gap`: a length `grid-row-gap`: a length `column-gap`: a length, percentage or calc(); `row-gap`: a length, percentage or calc();

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

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

<grid-template> = 
  none                                                |
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?  

<grid-template-rows> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<grid-auto-columns> = 
  <track-size>+  

<grid-auto-rows> = 
  <track-size>+  

<grid-template-columns> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<explicit-track-list> = 
  [ <line-names>? <track-size> ]+ <line-names>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<fixed-breadth> = 
  <length-percentage [0,∞]>

Ejemplo

HTML

html

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

CSS

css

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

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

Resultado

Especificaciones

Specification
CSS Grid Layout Module Level 2 # grid-shorthand

Compatibilidad con navegadores

Ver también

Propiedades CSS relacionadas: grid-template, grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-columns, grid-auto-rows, grid-auto-flow
Grid Layout Guide: Line-based placement with CSS Grid
Grid Layout Guide: Grid template areas - Grid definition shorthands