Disposition de grille CSS

Le module de disposition de grille CSS excelle à diviser une page en régions principales ou à définir la relation en termes de taille, de position et d'empilement entre les parties d'un contrôle construit à partir de primitives HTML.

Comme les tableaux, la disposition de grille permet à un·e auteur·ice d'aligner des éléments en colonnes et en incises. Cependant, de nombreuses mises en page sont soit possibles, soit plus faciles avec la grille CSS qu'elles ne l'étaient avec les tableaux. Par exemple, les éléments enfants d'un conteneur en grille peuvent se positionner de manière à se chevaucher et à se superposer, de manière similaire aux éléments positionnés en CSS.

La disposition de grille en action

L'exemple montre une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesurent au moins 100 pixels et ont au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.

<div class="enveloppe">
  <div class="un">Un</div>
  <div class="deux">Deux</div>
  <div class="trois">Trois</div>
  <div class="quatre">Quatre</div>
  <div class="cinq">Cinq</div>
  <div class="six">Six</div>
</div>

* {
  box-sizing: border-box;
}
.enveloppe {
  max-width: 940px;
  margin: 0 auto;
}
.enveloppe > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgb(233 171 88 / 50%);
  padding: 1em;
  color: #d9480f;
}
.enveloppe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.un {
  grid-column: 1 / 3;
  grid-row: 1;
}
.deux {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.trois {
  grid-column: 1;
  grid-row: 2 / 5;
}
.quatre {
  grid-column: 3;
  grid-row: 3;
}
.cinq {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Cet exemple animé utilise display, grid-template-columns, grid-template-rows et gap pour créer la grille, et grid-column et grid-row pour positionner les éléments dans la grille. Pour voir et modifier le HTML et le CSS utilisés, cliquez sur « Exécuter » en haut à droite de l'exemple.

<flex> (unité fr)

Termes et définitions du glossaire

Guides

Concepts de base de la disposition en grille: Un aperçu des différentes fonctionnalités offertes par le module de disposition en grille CSS.
Relation de la disposition en grille avec d'autres méthodes de disposition: Comment la disposition en grille s'articule avec d'autres fonctionnalités CSS, y compris les boîtes flexibles, les éléments positionnés absolument et display: contents.
Disposition en grille utilisant le placement basé sur les lignes: Les lignes de la grille et comment positionner les éléments par rapport à ces lignes, y compris les propriétés grid-area, les numéros de ligne négatifs, le chevauchement de plusieurs cellules et la création de gouttières de grille.
Zones de modèle de grille: Positionner les éléments de la grille en utilisant des zones de modèle nommées.
Disposition en grille utilisant des lignes de grille nommées: Combiner les noms et les tailles de pistes ; positionner les éléments de la grille en définissant des lignes de grille nommées et des zones de modèle.
Placement automatique dans la disposition en grille: Comment la grille positionne les éléments qui ne déclarent aucune propriété de placement.
Aligner les éléments dans une disposition en grille CSS: Aligner, justifier et centrer les éléments de la grille le long des deux axes d'une disposition en grille.
Grilles, valeurs logiques et modes d'écriture: Examiner l'interaction entre la disposition en grille CSS, l'alignement des boîtes et les modes d'écriture, ainsi que les propriétés et valeurs logiques et physiques CSS.
Disposition en grille et accessibilité: Examiner comment la disposition en grille CSS peut à la fois favoriser et nuire à l'accessibilité.
Réaliser des dispositions courantes avec des grilles: Quelques dispositions différentes qui présentent les techniques utilisables lors de la conception de dispositions en grille CSS, notamment l'utilisation de grid-template-areas, d'un système de grille flexible à 12 colonnes et d'une liste de produits utilisant le placement automatique.
Sous-grille: Ce que fait la sous-grille, avec les cas d'utilisation et les modèles de conception auxquels elle répond.
Disposition en voies de grille: Détails sur la disposition en voies de grille et son utilisation.
Alignement des boîtes dans une disposition en grille CSS: Fonctionnement de l'alignement des boîtes dans le contexte d'une disposition en grille.