Auto-Fit & Auto-Fill

La véritable puissance de CSS Grid pour le design responsive réside dans la fonction repeat() combinée avec auto-fit ou auto-fill et minmax(). Cela permet au navigateur de déterminer automatiquement combien de colonnes peuvent tenir dans l'espace disponible.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Décomposons cela :

• repeat() — Répète un motif de piste.
• auto-fit — Crée autant de colonnes que possible, et réduit les pistes vides pour que les éléments s'étirent et remplissent la ligne.
• auto-fill — Crée autant de colonnes que possible, mais préserve les pistes vides. Les éléments ne s'étirent pas dans les colonnes vides.
• minmax(200px, 1fr) — Chaque colonne fait au minimum 200px mais peut grandir pour prendre une part égale de l'espace restant.

La différence entre auto-fit et auto-fill n'a d'importance que lorsque tu as moins d'éléments que de colonnes disponibles. Avec auto-fit, les colonnes excédentaires se réduisent et les éléments s'étirent. Avec auto-fill, les colonnes vides restent, et les éléments gardent leur taille minimale.

Lorsque tu places plus d'éléments que ce que ta définition de grille explicite prévoit, CSS Grid crée des pistes implicites pour contenir les éléments supplémentaires. Tu peux contrôler la taille de ces pistes implicites :

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;    /* les lignes implicites font 150px */
}

La propriété grid-auto-flow contrôle comment les éléments placés automatiquement remplissent la grille :

• row (par défaut) — Les éléments remplissent chaque ligne avant de passer à la suivante.
• column — Les éléments remplissent chaque colonne avant de passer à la suivante.
• dense — Le navigateur essaie de remplir les trous plus tôt dans la grille. Ajoute-le après row ou column : grid-auto-flow: row dense.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;  /* remplit les espaces */
}

.gallery .wide {
  grid-column: span 2;  /* certains éléments s'étendent sur 2 colonnes */
}

L'empilement dense est idéal pour les galeries d'images où l'ordre visuel n'a pas besoin de correspondre à l'ordre source. Cependant, évite-le pour du contenu où l'ordre de lecture est important, car il peut réorganiser visuellement les éléments.