L'alignement des boîtes avec une grille CSS

Le module d'alignement de boîte détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous voyons comment fonctionne l'alignement des boîtes avec les grilles CSS.

Comme ce guide vise à détailler les aspects spécifiques aux grilles CSS et à l'alignement des boîtes, il doit être lu en conjonction avec le guide aperçu de l'alignement des boîtes, qui détaille les fonctionnalités communes de l'alignement des boîtes dans différentes méthodes de mise en page.

Exemple simple

Dans cet exemple utilisant la disposition en grille, il y a un espace supplémentaire dans le conteneur de grille après avoir disposé les pistes à largeur fixe le long de l'axe en ligne axe principal. Cet espace est distribué à l'aide de justify-content. Sur l'axe de bloc axe secondaire, l'alignement des éléments à l'intérieur de leurs zones de grille est contrôlé avec align-items. Le premier élément remplace la valeur de align-items définie sur le groupe en définissant align-self sur center.

html

<div class="box">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois <br />a <br />du <br />texte <br />supplémentaire</div>
  <div>Quatre</div>
  <div>Cinq</div>
  <div>Six</div>
</div>

body {
  font-family: sans-serif;
}
.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

css

.box {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  align-items: start;
  justify-content: space-between;
  border: 2px dotted rgb(96 139 168);
}

.box :first-child {
  align-self: center;
}

Axes de la grille

En tant que méthode de disposition bidimensionnelle, lorsqu'on travaille avec la disposition en grille, nous avons toujours deux axes sur lesquels aligner nos éléments. Nous avons accès à toutes les propriétés d'alignement des boîtes pour nous aider à y parvenir.

L'axe en ligne est l'axe qui correspond à la direction dans laquelle les mots d'une phrase s'écoulent dans le mode d'écriture utilisé. Ainsi, dans une langue horizontale comme l'anglais ou l'arabe, la direction en ligne est horizontale. Si vous êtes dans un mode d'écriture vertical, l'axe en ligne est vertical.

Une situation où l'axe en ligne est horizontal.

Pour aligner des éléments dans l'axe en ligne, vous utilisez les propriétés qui commencent par justify- : justify-content, justify-items et justify-self.

L'axe de bloc croise l'axe en ligne dans la direction où les blocs sont affichés sur la page — par exemple, les paragraphes en français sont affichés les uns en dessous des autres verticalement. C'est la dimension de bloc.

Pour aligner des éléments sur l'axe de bloc, vous utilisez les propriétés qui commencent par align- : align-content, align-items et align-self.

Une situation où l'axe de bloc est vertical.

Alignement individuel

Ces propriétés permettent d'aligner l'élément à l'intérieur de la zone de grille dans laquelle il est placé :

Les propriétés *-items, align-items et justify-items, sont appliquées au conteneur de grille et définissent l'alignement pour tous les éléments de la grille en tant que groupe. Les propriétés *-self, align-self et justify-self, sont appliquées aux éléments de la grille. Cela signifie que vous pouvez définir l'alignement pour tous les éléments de la grille, puis remplacer l'alignement de certains éléments en appliquant les propriétés align-self ou justify-self aux règles des éléments individuels.

La valeur initiale pour align-items et justify-items est stretch, et la valeur initiale pour align-self et justify-self est auto, de sorte que l'élément s'étend sur toute la zone de la grille. L'exception à cette règle est lorsque l'élément a un rapport d'aspect intrinsèque, par exemple une image. Dans ce cas, l'élément est aligné sur start dans les deux dimensions afin que l'image ne soit pas déformée.

Alignement du contenu

Ces propriétés permettent d'aligner les pistes de la grille lorsqu'il reste de l'espace à répartir :

Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

Gouttières et versions historiques des propriétés préfixées

Ces propriétés définissent l'espacement entre les éléments de la grille à l'intérieur d'un conteneur de grille :

La spécification de la grille contenait initialement la définition des propriétés grid-row-gap, grid-column-gap et grid-gap. Celles-ci ont depuis été déplacées dans la spécification Box Alignment et aliasées à row-gap, column-gap, et gap. Cela permet de les utiliser pour d'autres méthodes de disposition où un espace entre les éléments est pertinent.

Voir aussi

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 22 mai 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu