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 inicial | as each of the properties of the shorthand:
|
---|---|
Applies to | grid containers |
Heredable | no |
Percentages | as each of the properties of the shorthand:
|
Valor calculado | as each of the properties of the shorthand:
|
Animation type | discrete |
Sintaxis
Valores
<'grid-template'>
- Define el
grid-template
(en-US) incluyendogrid-template-columns
,grid-template-rows
ygrid-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
(definiendogrid-template-columns
ennone
) y especificando como auto-repetir los column tracks mediantegrid-auto-columns
(definiendogrid-auto-rows
enauto
).grid-auto-flow
(en-US) es seteado encolumn
en consecuencia, condense
si se especifica.
Todas las otras sub-propiedades degrid
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
(definiendogrid-template-rows
ennone
) y especificando como auto-repetir los row tracks mediantegrid-auto-rows
(definiendogrid-auto-columns
enauto
).grid-auto-flow
(en-US) es seteado enrow
en consecuencia, condense
si se especifica.
Todas las otras sub-propiedades degrid
se redefinen a sus valores iniciales.
Sintaxis formal
<'grid-template'> (en-US) | (en-US) <'grid-template-rows'> / [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-columns'>? (en-US) | (en-US) [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-rows'>? (en-US) / <'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
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
- Propiedades CSS relacionadas:
grid-template
(en-US),grid-template-rows
,grid-template-columns
,grid-template-areas
,grid-auto-columns
,grid-auto-rows
,grid-auto-flow
(en-US) - Grid Layout Guide: Line-based placement with CSS Grid
- Grid Layout Guide: Grid template areas - Grid definition shorthands