Envelopper une grille

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

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.

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 :

.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 :

.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).

• grid-template-columns
• Les grilles CSS sur MDN
• Article : Les grilles CSS, plus de flexibilité avec minmax() (en anglais)
• Article : Isoler des éléments sur une grille CSS (en anglais)