Propriété CSS grid

La propriété CSS grid est une propriété abrégée pour les propriétés suivantes :

Vous pouvez spécifier soit les propriétés explicites de la grille (grid-template-rows, grid-template-columns, grid-template-areas) soit les propriétés implicites (grid-auto-rows, grid-auto-columns, grid-auto-flow) dans une seule déclaration grid. Le raccourci mappe directement ces sous-propriétés, et toute sous-propriété omise est réinitialisée à sa valeur initiale.

Valeur initiale	`none`
S'applique à	Conteneurs de grille.
Héritée	Non.
Animable	Oui. La mise en page en grille est animable.
Version	Module de mise en page en grille CSS Niveau 1
Syntaxe DOM	Object.style.grid = "150px / auto auto auto";

Syntaxe

Syntaxe de la propriété CSS grid

css

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> | initial | inherit;

Exemple 1 : Raccourci de grille de base

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>

Try it Yourself »

Exemple 2 : Raccourci de grille avec auto-flow

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow column auto auto auto;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

Propriété CSS grid

Exemple 3 : Raccourci de grille avec tailles de ligne fixes

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
`none`	La taille des colonnes et des lignes n'est pas spécifiée. Il s'agit de la valeur par défaut.
`grid-template-rows / grid-template-columns`	Spécifie la taille des lignes et des colonnes.	Tester »
`grid-template-areas`	Spécifie la mise en page de la grille à l'aide de zones de grille nommées.	Tester »
`grid-template-rows / [auto-flow && dense?] grid-auto-columns`	Définit les tailles des lignes et spécifie l'auto-flow et le placement dense pour les colonnes.
`[auto-flow && dense?] grid-auto-rows / grid-template-columns`	Définit les tailles des colonnes et spécifie l'auto-flow et le placement dense pour les lignes.
`initial`	Réinitialise la propriété à sa valeur par défaut.
`inherit`	Hérite la propriété de l'élément parent.

Pratique

Que pouvez-vous réaliser avec CSS Grid Layout selon le contenu de la page ?

Création de pages web avec des designs complexes qui sont réactifs et flexibles.Il facilite l'agencement ou l'alignement des éléments.Élimine le besoin d'utiliser des bibliothèques externes comme Bootstrap pour les mises en page.Il ne peut pas être combiné avec d'autres systèmes de mise en page.Le grid-container contient la grille et offre diverses propriétés pour définir son comportement et ses limites extérieures.

Propriété CSS grid ​

Syntaxe ​

Exemple 1 : Raccourci de grille de base ​

Exemple 2 : Raccourci de grille avec auto-flow ​

Résultat ​

Exemple 3 : Raccourci de grille avec tailles de ligne fixes ​

Valeurs ​

Pratique ​

Propriété CSS grid

Syntaxe

Exemple 1 : Raccourci de grille de base

Exemple 2 : Raccourci de grille avec auto-flow

Résultat

Exemple 3 : Raccourci de grille avec tailles de ligne fixes

Valeurs

Pratique