Envelopper une grille

Exigences

Les éléments placés sur la grille doivent pouvoir s'aligner sur un conteneur centré horizontalement avec une largeur maximale, sur les bords extérieurs de la grille, ou les deux.

Recette

Cliquez sur « Exécuter » dans les blocs de code ci-dessous pour modifier l'exemple dans le MDN Playground :

<div class="grid">
  <div class="wrapper">
    <p>
      Cet élément s'aligne sur un «&nbsp;wrapper&nbsp;» — des colonnes ayant une
      largeur maximale.
    </p>
  </div>
  <div class="full-width">
    <p>Cet élément s'aligne sur le bord du conteneur de grille.</p>
  </div>
  <div class="left-edge">
    <p>
      Cet élément s'aligne sur le bord gauche du conteneur de grille et le bord
      droit du «&nbsp;wrapper&nbsp;».
    </p>
  </div>
  <div class="right-wrapper">
    <p>
      Cet élément s'aligne sur le bord droit des colonnes du
      «&nbsp;wrapper&nbsp;».
    </p>
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.grid {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(
      20px,
      1fr
    );
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
}

.grid > * {
  border: 2px solid rgb(95 97 110);
  border-radius: 0.5em;
  padding: 20px;
}

.full-width {
  grid-column: 1 / -1;
}

.wrapper {
  grid-column: 2 / -2;
}

.left-edge {
  grid-column: 1 / -2;
}

.right-wrapper {
  grid-column: 4 / -2;
}

Choix effectués

Cette recette utilise la fonction minmax() de la grille CSS pour définir la taille des pistes dans la propriété grid-template-columns. Pour les colonnes centrales avec une largeur maximale, on peut définir une valeur minimale de 0 ou plus et une valeur maximale qui spécifie la taille maximale que les pistes de colonne peuvent atteindre. L'utilisation d'unités relatives ou absolues <length> (pixels, em, rem) crée une taille maximale fixe pour le conteneur central, tandis que l'utilisation de valeurs en <percentage> ou d'unités de la zone d'affichage permet au conteneur de s'adapter à son contexte.

Les deux colonnes extérieures ont une taille maximale de 1fr, ce qui signifie qu'elles s'étendent pour occuper l'espace restant dans le conteneur de grille.

Méthodes de recours ou alternatives utiles

Pour centrer la grille horizontalement sur la page, vous pouvez définir une max-width ainsi que des margin gauche et droite à auto :

.grid {
  max-width: 96vw; /* Limite la largeur à 96 % de la largeur de la zone d'affichage (« viewport » en anglais) */
  margin: 0 auto; /* Centre horizontalement le conteneur */
}

Problèmes d'accessibilité

Bien que la grille CSS permette de positionner les éléments presque partout, il est important de s'assurer que votre balisage sous-jacent suit un ordre logique (voir Disposition en grille CSS et accessibilité pour plus de détails).

Voir aussi

• La propriété grid-template-columns
• Les grilles CSS
• Les grilles CSS, plus de flexibilité avec minmax() ^(angl.) (2018)
• Isoler des éléments sur une grille CSS ^(angl.) (2017)