grid

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨octobre 2017⁩.

La propriétégrid est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites (grid-template-rows,grid-template-columns etgrid-template-areas), 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>One</div>      <div>Two</div>      <div>Three</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-gap: 10px;  width: 200px;}#example-element :nth-child(1) {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;}#example-element :nth-child(2) {  background-color: rgba(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: rgba(94, 255, 0, 0.2);  border: 3px solid green;  grid-column: auto / span 2;}

Note :Une seule déclarationgrid permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.

Syntaxe

css

/* Valeurs <'grid-template'> */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);/* Valeurs globales */grid: inherit;grid: initial;grid: unset;

Valeurs

Pour plus de détails, voir les pages de chacune des propriétés :grid-template,grid-auto-flow,grid-auto-rows,grid-auto-columns.

<'grid-template'>: Définitgrid-template, ce qui inclutgrid-template-columns,grid-template-rows etgrid-template-areas.
<'grid-auto-flow'>: Définitgrid-auto-flow qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.
<'grid-auto-rows'>: Définitgrid-auto-rows qui indique la taille des pistes créées pour les lignes de façon implicite.
<'grid-auto-columns'>: Définitgrid-auto-columns qui indique la taille des pistes créées pour les colonnes de façon implicite.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `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`
Applicabilité	conteneurs de grille
Héritée	non
Pourcentages	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-rows`: fait référence à la dimension correspondante de la zone de contenu `grid-template-columns`: fait référence à la dimension correspondante de la zone de contenu `grid-auto-rows`: fait référence à la dimension correspondante de la zone de contenu `grid-auto-columns`: fait référence à la dimension correspondante de la zone de contenu
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `grid-template-rows`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues `grid-template-columns`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues `grid-template-areas`: comme spécifié `grid-auto-rows`: le pourcentage tel que spécifié ou une longueur absolue `grid-auto-columns`: le pourcentage tel que spécifié ou une longueur absolue `grid-auto-flow`: comme spécifié `grid-column-gap`: le pourcentage tel que spécifié ou une longueur absolue `grid-row-gap`: le pourcentage tel que spécifié ou une longueur absolue `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
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `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`: discrète `grid-auto-rows`: by computed value type `grid-auto-columns`: by computed value type `grid-auto-flow`: discrète `grid-column-gap`: unelongueur `grid-row-gap`: unelongueur `column-gap`: unelongueur,pourcentage ou calc() ; `row-gap`: unelongueur,pourcentage ou calc() ;

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

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

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

Exemples

CSS

css

#container {  display: grid;  grid: repeat(2, 60px) / auto-flow 80px;}#container > div {  background-color: #8ca0ff;  width: 50px;  height: 50px;}

HTML

html

<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

Résultat

Spécifications

Specification
CSS Grid Layout Module Level 2 # grid-shorthand

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le⁨9 nov. 2025⁩ par lescontributeurs du MDN.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

grid

Help improve MDN