Envelopper une grille

Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.

Spécifications sommaires

Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.

Recette

[フレーム]

Note : Télécharger cet exemple.

Choix effectués

Cette recette utilise la fonction minmax() afin de définir les tailles des pistes pour la propriété grid-template-columns.

Les deux colonnes extérieures ont une taille maximale de 1fr, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.

Méthodes de recours ou alternatives

Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir max-width et des marges horzontales avec auto afin que le contenu soit centré horizontalement :

css

.grid {
 max-width: 1200px;
 margin: 0 auto; // on centre le conteneur en horizontal
 display: grid;
 /* Other grid code goes here */
}
/* On retire max-width et les marges si le navigateur */
/* prend en charge les grilles */
@supports (display: grid) {
 .grid {
 max-width: none;
 margin: 0;
 }
}

Pour qu'un élément soit isolé et colle au bord du viewport, on peut utiliser cette astuce de Una Kravets :

css

.item {
 width: 100vw;
 margin-left: 50%;
 transform: translate3d(-50%, 0, 0);
}

On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.

Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir les grilles CSS et l'accessibilité pour plus de détails).