Lapropriété raccourcieCSSgrid permet de définir toutes les propriétés de grille explicites et implicites en une seule déclaration.

En utilisantgrid, vous définissez un axe avecgrid-template-rows ougrid-template-columns, puis vous définissez comment le contenu doit se répéter automatiquement sur l'autre axe avec les propriétés de grille implicites :grid-auto-rows,grid-auto-columns, etgrid-auto-flow.

Exemple interactif

grid: auto-flow / 1fr 1fr 1fr;

grid: auto-flow dense / 40px 40px 1fr;

grid: repeat(3, 80px) / auto-flow;

<section>  <div>    <div>      <div>Un</div>      <div>Deux</div>      <div>Trois</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-gap: 10px;  width: 200px;}#example-element :nth-child(1) {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;}#example-element :nth-child(2) {  background-color: rgb(255 0 200 / 0.2);  border: 3px solid rebeccapurple;  grid-column: auto / span 3;  grid-row: auto / span 2;}#example-element :nth-child(3) {  background-color: rgb(94 255 0 / 0.2);  border: 3px solid green;  grid-column: auto / span 2;}

Syntaxe

/* Valeurs <'grid-template'> */grid: none;grid: "a" 100px "b" 1fr;grid: [line-name1] "a" 100px [line-name2];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);/* Valeurs globales */grid: inherit;grid: initial;grid: revert;grid: revert-layer;grid: unset;

Valeurs

<'grid-template'>

Définitgrid-template, ce qui inclutgrid-template-columns,grid-template-rows etgrid-template-areas.

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

Configure un flux automatique en définissant explicitement les pistes de lignes avec la propriétégrid-template-rows (et la propriétégrid-template-columns ànone) et en définissant comment répéter automatiquement les pistes de colonnes avecgrid-auto-columns (etgrid-auto-rows àauto).grid-auto-flow est également définie surcolumn, avecdense si elle est incluse.

Toutes les autres sous-propriétés degrid sont réinitialisées à leur valeur initiale.

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

Configure un flux automatique en définissant explicitement les pistes de colonnes avec la propriétégrid-template-columns (et la propriétégrid-template-rows ànone) et en définissant comment répéter automatiquement les pistes de lignes avecgrid-auto-rows (etgrid-auto-columns àauto).grid-auto-flow est également définie surrow, avecdense si elle est incluse.

Toutes les autres sous-propriétés degrid sont réinitialisées à leur valeur initiale.

Définition formelle

Syntaxe formelle

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>?<track-size>]+<line-names>?)

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

<integer> =
<number-token>

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

Exemples

Créer une mise en page en grille

HTML

<div>  <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;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété raccourciegrid-template
• La propriétégrid-template-rows
• La propriétégrid-template-columns
• La propriétégrid-template-areas
• La propriétégrid-auto-columns
• La propriétégrid-auto-rows
• La propriétégrid-auto-flow
• Placer les éléments d'une grille sur les lignes
• Les zones de grilles et les propriétés raccourcies