Cours CSS / Grid : repeat, auto-fit, auto-fill et zones nommées

CSS Grid peut répéter des pistes avec repeat() et adapter le nombre de colonnes avec auto-fit ou auto-fill. Les deux modes de répétition automatique diffèrent dans la gestion des pistes vides ; les zones nommées offrent une autre manière de décrire de plus grandes parties de la page.

Comparez la répétition fixe et automatique

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

repeat(3, ...) définit trois colonnes indépendamment du nombre de cartes. Un quatrième élément placé automatiquement va dans la rangée suivante ; il n'augmente pas le nombre de colonnes. Cela diffère de la répétition automatique, qui calcule le nombre de pistes pouvant s'adapter. Voir Les bases de CSS Grid : pistes, lignes et placement.

.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 192px), 1fr));
}

auto-fit calcule combien de colonnes peuvent s'adapter à la taille minimale spécifiée. La première valeur de minmax est le minimum, la deuxième valeur est le maximum, et 1fr divise l'espace restant. Ici, min(100%, 192px) garantit que la largeur minimale de la colonne n'est pas supérieure à celle de son parent. Fixer la largeur minimale des colonnes à seulement 192px peut provoquer le dépassement d'une seule colonne au-delà de son parent lorsque le parent est plus étroit que 192px.

Pour un conteneur de 800px, des colonnes minimales de 192px et des espacements de 16px, trois colonnes nécessitent 608px, tandis que quatre en nécessitent 816px. Seules trois colonnes tiennent. Ce calcul détermine le nombre de colonnes ; la distribution de l'espace libre qui suit détermine leurs largeurs finales. Un texte long nécessite toujours une stratégie de retour à la ligne.

Comparer auto-fill et auto-fit

Les deux valeurs calculent initialement les colonnes répétées qui peuvent y entrer. Avec auto-fit, les pistes répétées restées vides sont réduites à une largeur nulle après le placement des éléments. Si les éléments remplissent toutes les colonnes, les deux valeurs peuvent sembler similaires, donc élargissez les conteneurs et réduisez le nombre de cartes lors de la comparaison. Même lorsque toutes les cartes tiennent dans une seule colonne sur un petit écran, la différence est difficile à voir. Consultez les règles de repeat() dans la documentation MDN .

Comprendre le placement automatique et dense

Les éléments qui ne spécifient pas de position sont placés ligne par ligne selon le grid-auto-flow: row par défaut. Même si l'élément précédent occupe une grande zone et qu'un espace vide est créé, le placement par défaut ne revient pas constamment à l'espace vide lors du placement de l'élément suivant. Ce comportement par défaut facilite la compréhension de l'ordre HTML et de la progression visuelle.

grid-auto-flow: row dense peut remplir l'espace vide à l'avant avec de petits éléments à l'arrière. Bien que l'espace devienne plus serré, l'ordre dans lequel il apparaît à l'écran et l'ordre du DOM (Document Object Model) peuvent différer. Le placement CSS ne réorganise pas le HTML, donc le focus clavier et l'ordre de lecture doivent être considérés ensemble. Pour les étapes numérotées de manière significative, les enregistrements chronologiques et les saisies de formulaire, maintenir l'ordre est plus important que d'éliminer les espaces vides. Vous pouvez vérifier les conditions de placement automatique dans la description grid-auto-flow de MDN.

Exécutez l'exemple de répétition automatique

Enregistrez l'exemple sous grid-auto-repeat.html. La première section comporte deux cartes dans un conteneur limité à 800px. La deuxième section utilise deux liens occupant deux colonnes et deux occupant une colonne, laissant un trou qui vous permet de comparer le placement ordinaire avec dense.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-auto-repeat.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 192px), 1fr));
 gap: 16px; width: min(100%, 800px); }
 .cards > div { min-width: 0; padding: 16px; background: #dceefa; overflow-wrap: anywhere; }
 .flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
 grid-auto-flow: row; max-width: 600px; margin-top: 16px; }
 .flow > a { padding: 12px; background: #e8f5de; }
 .flow > .wide { grid-column: span 2; }
  </style>
</head>
<body>
<h1>Comparing empty repeated columns</h1><div class="cards"><div>First card</div><div>Second card</div></div>
<h2>Default auto-placement</h2><div class="flow"><a class="wide" href="#result">1: two spaces</a><a class="wide" href="#result">2: two spaces</a><a href="#result">3: One space</a><a href="#result">4: one space</a></div>
<p id="result">This is the destination of the automatic-layout link.</p>
</body>
</html>

1. Sur un écran large, si la première section fait 800px, les deux cartes en auto-fit occuperont chacune 392px. Remplacer uniquement auto-fit par auto-fill conserve les trois colonnes, laissant les deux premières colonnes de cartes à environ 256px et une colonne vide. Après confirmation, revenez à auto-fit.
2. Copiez plus de divs dans la première section pour en faire quatre. Trois colonnes sont remplies et une quatrième carte est placée dans la ligne suivante. Dans cette condition, il n'y a pas de colonnes répétées vides, ce qui réduit la différence entre les deux valeurs. Après la pratique, revenez aux deux cartes originales.
3. Rétrécissez l'écran pour vous assurer que la largeur du parent est inférieure à 192px. Grâce à min(100%, 192px), une colonne s'adaptera à son parent. Changer le minimum pour juste 192px peut provoquer un débordement dans des zones plus étroites. Après comparaison, l'expression originale est restaurée.
4. Vérifiez l'espace vide après le lien 1 et l'emplacement du lien 3 dans .flow. Si vous changez seulement grid-auto-flow en row dense, le numéro 3 sera placé dans l'espace vide précédent. Avec Tab, vérifiez si l'ordre 1 → 2 → 3 → 4 est maintenu. Revenez à row après la pratique.

Définissez des régions de page avec des zones nommées

Plutôt que de calculer séparément les numéros de colonne et de ligne, il est plus facile de comprendre l'intention de mise en page de la page en exprimant de grandes sections avec des noms tels que header, main, aside et footer. Chaque chaîne dans grid-template-areas correspond à une ligne, et les noms séparés par des espaces à l'intérieur de la chaîne sont des cellules. La valeur grid-area de l'enfant doit correspondre à son nom pour entrer dans cette zone. Comment changer la configuration des colonnes en fonction de la largeur de l'écran est expliqué dans Media queries CSS et points de rupture adaptés au contenu.

Répéter le même nom sur plusieurs cellules crée une zone rectangulaire. Les zones ne peuvent pas avoir la forme d'un L ou d'une île isolée. Chaque ligne doit avoir le même nombre de cellules, et les cellules à laisser vides sont indiquées par un point (.). Si une déclaration est invalide, le navigateur ne la prendra pas en compte, ce qui peut donner l'impression d'un placement automatique. Vous pouvez vérifier les conditions de zone valides dans la description de grid-template-areas de MDN.

Enregistrez le code ci-dessous sous grid-areas.html. Sur un ordinateur de bureau, le contenu principal et les informations complémentaires sont placés côte à côte, et à 640px ou moins, ils sont dans une seule colonne. L’ordre HTML place toujours le contenu principal avant les informations complémentaires ; la disposition visuelle suit cet ordre.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-areas.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
 grid-template-areas: "header header" "main aside" "footer footer"; gap: 16px; max-width: 1000px; }
 .page > * { min-width: 0; padding: 20px; background: #dceefa; overflow-wrap: anywhere; }
 header { grid-area: header; } main { grid-area: main; } aside { grid-area: aside; } footer { grid-area: footer; }
 @media (max-width: 640px) {
 .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "aside" "footer"; }
 }
  </style>
</head>
<body>
<h1>Page area names</h1><div class="page"><header>Site title</header><main><h2>Main content</h2><p>This is the main content area. The HTML order keeps it first on mobile, too.</p></main><aside>Related information</aside><footer>Contact and site information</footer></div>
</body>
</html>

1. Assurez-vous que l'en-tête et le pied de page occupent deux colonnes sur un grand écran. Si vous réduisez l'écran à 640px ou moins, en-tête → principal → aside → pied de page seront dans une seule colonne. Voyez pourquoi vous devez changer les définitions de colonnes et les chaînes de zones ensemble.
2. Changez uniquement la valeur de grid-area pour l’élément aside en utilisant un autre nom. La connexion entre la zone aside réservée dans le modèle et l'élément réel peut être déconnectée et ne pas être placée dans la case prévue. Restaurez le nom en aside.
3. Si vous changez seulement le modèle pour grand écran en "header header" "header aside" "footer footer", l'en-tête sera en forme de L et la déclaration grid-template-areas sera invalide. Après avoir confirmé l'application dans les outils de développement, les trois chaînes d'origine sont restaurées.

En pratique, il est plus facile à maintenir si vous séparez la zone pour créer des colonnes en fonction du nombre de cartes et la zone pour nommer les sections de la page. La répétition automatique détermine le nombre et la largeur minimale, tandis que les noms de région déterminent la structure de la page et les points de transition. Avant d'essayer de forcer les deux dans une seule règle, décidez quel problème chaque conteneur essaie de résoudre.