grid
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
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 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 | as each of the properties of the shorthand:
|
Sintaxis
Valores
<'grid-template'>
-
Define el
grid-template
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
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
es seteado enrow
en consecuencia, condense
si se especifica. Todas las otras sub-propiedades degrid
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
<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
Specification |
---|
CSS Grid Layout Module Level 2 # grid-shorthand |
Compatibilidad con navegadores
BCD tables only load in the browser
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