Cours CSS / les bases de Grid : pistes, lignes et placement

CSS Grid définit des rangées et des colonnes pour une mise en page bidimensionnelle et place les éléments enfants directs dans cette grille. Les lignes de la grille délimitent les pistes et les cellules ; un élément peut s'étendre sur plusieurs pistes sans changer l'ordre du document.

Identifiez les conteneurs, lignes, pistes, cellules et zones

Un conteneur Grid est un parent qui applique display: grid, et les éléments Grid sont des enfants directs de ce parent. Les enfants au sein du premier enfant ne sont pas des éléments indépendants de la grille extérieure. Dessiner une grille en CSS ne crée pas de nouveaux éléments HTML ; cela change simplement la façon dont nous calculons où chaque enfant se placera dans la grille.

Les numéros de ligne et les numéros de colonne sont différents. Si vous comptez jusqu'à la bordure extérieure des deux colonnes, les lignes numérotées sont 1·2·3. Si vous placez un élément sur les lignes 1 à 3, il occupera deux colonnes. gap est l'espacement entre les pistes et est calculé séparément du padding ou de la bordure de l'élément. Il est facile de voir les numéros de ligne et les zones réelles en activant l'affichage de la grille dans le panneau Elements des outils de développement. Les concepts de base de la grille de MDN résument les termes et les opérations de base.

Définir des colonnes avec des px, pourcentages et fr

.grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

Ce code partiel peut être comparé en remplaçant les déclarations de colonnes dans la règle .grid de l'exemple complet. La première colonne utilise 160px et la deuxième colonne utilise l'espace restant. fr est une fraction, qui divise l'espace restant selon un ratio après avoir pris en compte les autres pistes et les espaces. Figer la première colonne sans tenir compte du contenu peut rendre le corps trop étroit pour les écrans étroits, donc jugez cela en fonction du contenu réel.

Dans un conteneur d'une largeur de 640px, si l'espace est de 16px et que les deux colonnes sont de 1fr·2fr, l'espace à distribuer est de 624px. S'il n'y a pas de contrainte de taille minimale, la première colonne mesure 208px et la deuxième 416px. L'exemple complet utilise minmax(0, 1fr) minmax(0, 2fr) pour s'assurer que la largeur minimale de la piste n'est pas fixée de manière significative en raison de son contenu.

Si vous utilisez 50% 50% et gap: 16px ensemble, la largeur du conteneur peut déjà être remplie uniquement avec les colonnes et ensuite le gap peut être ajouté en dépassement. Pour distribuer l’espace disponible entre des colonnes flexibles, fr tient compte de l’espace déjà pris par les autres pistes et les gaps. Cela ne signifie pas que vous devez rendre toutes les colonnes du même ratio. Votre liste peut avoir besoin d'une petite colonne pour le nom et d'une grande colonne pour la description, et vous pouvez également vouloir utiliser une combinaison de colonnes fixes et flexibles.

Comparer les lignes explicites et implicites

grid-template-rows: 80px définit explicitement une première ligne. Si les éléments suivants nécessitent des rangées supplémentaires, une ligne implicite est créée, et sa taille peut être ajustée avec grid-auto-rows. Créer deux colonnes ne vous limite pas à deux lignes.

Utilisez une ligne fixe là où il existe une exigence de taille claire, mais laissez les cartes explicatives accueillir des lignes supplémentaires provenant de la traduction ou du texte agrandi. minmax(100px, auto) définit une taille minimale et permet la croissance ; il n'exige pas que toutes les lignes aient des hauteurs identiques. Chaque ligne dépend de son contenu et des conditions de mise en page. Pour plus de détails, voir la documentation MDN sur grid-auto-rows .

Placer les éléments avec les numéros de ligne et span

.feature {
  grid-column: 1 / -1;
}
/* Different representations spanning two columns in the same two-column explicit grid */
/* .feature { grid-column: span 2; } */

1 / -1 signifie de la première ligne à la dernière ligne de la grille explicite. Il convient aux titres ou aux zones en évidence qui occupent toute la largeur de la grille, qu'il s'agisse d'une disposition en deux colonnes ou d'une seule colonne. Les numéros de ligne négatifs sont comptés par rapport à la fin de la grille explicite et ne représentent pas la fin de toutes les pistes générées automatiquement. Comment ajuster le nombre et la taille minimale des colonnes répétées est comparé dans CSS Grid : repeat, auto-fit, auto-fill et zones nommées.

span 2 signifie occuper deux pistes, et si vous ne spécifiez pas une ligne de départ exacte, le placement automatique déterminera la position. Sur mobile, si vous n'avez qu'une seule colonne et que vous gardez span 2, vous pourriez créer une colonne supplémentaire non désirée. Si vous voulez maintenir la largeur complète, utilisez 1 / -1 ou re-spécifiez la valeur de span sur mobile. Lorsque vous minimisez les spécifications de placement, tous les éléments restants seront par défaut placés dans des cellules vides dans l'ordre HTML.

Exécutez l'exemple complet de Grid

Enregistrez le code ci-dessous sous grid-basics.html et ouvrez-le. A et B sont placés dans la première ligne fixe, C occupe les deux colonnes d’une rangée implicite, et D et E sont placés dans la ligne automatique suivante. En dessous de 480px, la grille ne comporte plus qu’une colonne et C continue de prendre toute la largeur.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-basics.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; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 grid-template-rows: 80px; grid-auto-rows: minmax(100px, auto); gap: 16px;
 width: min(100%, 640px); }
 .grid > div { min-width: 0; padding: 12px; background: #dceefa; overflow-wrap: anywhere; }
 .feature { grid-column: 1 / -1; }
 @media (max-width: 480px) { .grid { grid-template-columns: minmax(0, 1fr); } }
  </style>
</head>
<body>
<h1>Column proportions and row heights</h1>
<div class="grid"><div>A: first row</div><div>B: first row</div><div class="feature">C: Area that occupies two columns. As the content grows, the height of this auto-row also increases.</div><div>D: next line</div><div>E: This card has a long description. The height you need will vary depending on the length of your content. Instead of forcing all content to fit at a fixed height, set it to accommodate content beyond the minimum height.</div></div>
</body>
</html>

1. Sur les grands écrans, assurez-vous que la largeur de .grid est de 640px et activez Afficher la grille dans les Outils de développement. Les colonnes mesurent 208px·416px, et l'espacement entre elles est de 16px. Si vous changez le ratio des colonnes à 1fr·1fr, elles deviennent chacune de 312px. Après comparaison, il est restauré à 1fr·2fr.
2. La première rangée a une hauteur de 80px. Si vous ajoutez plusieurs lignes de texte à l'intérieur de A, la hauteur de la rangée elle-même restera la même et le contenu peut déborder. Si vous remettez le texte dans son état original et changez grid-template-rows en minmax(80px, auto), elle peut s'agrandir en fonction du contenu.
3. Augmentez suffisamment le contenu de C. grid-auto-rows est minmax(100px, auto) afin que les lignes puissent être plus grandes que 100px. Changez seulement grid-auto-rows à 100px et observez la différence dans les lignes fixes, puis revenez à sa valeur originale.
4. Si vous supprimez simplement la déclaration grid-column de C, C sera placé dans une seule cellule et la position des éléments derrière lui changera également. Restaurez 1/-1 à nouveau. Réduisez l'écran en dessous de 480px pour voir si la spécification de largeur globale est maintenue en 1 colonne.

Gérez le contenu long sur des écrans étroits

La piste de 1fr de la grille peut s'étirer avec de longues chaînes en raison de sa taille minimale automatique par défaut. minmax(0, 1fr) est une méthode pour définir la taille minimale de la piste à 0, et les retours à la ligne réels dans la chaîne nécessitent des règles séparées. min-width: 0 est également appliqué à l'élément lui-même selon la situation. Enregistrez le code suivant sous grid-long-text.html. Si les éléments débordent de la colonne, consultez overflow, retour à la ligne et points de suspension en CSS pour les règles de retour à la ligne des chaînes longues.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-long-text.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; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
 width: min(100%, 600px); }
 .grid > div { padding: 12px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Grid minimum size and long strings</h1><div class="grid"><div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div><div>A description of ordinary length</div></div>
</body>
</html>

1. Changez uniquement overflow-wrap en normal pour confirmer que les lettres peuvent déborder même si la largeur de la piste est maintenue.
2. Si vous remplacez les deux colonnes par 1fr 1fr, vous pouvez voir comment la taille minimale d'une longue chaîne affecte la répartition des colonnes. Après comparaison, nous rétablissons à la fois minmax(0, 1fr) et anywhere.

Choisissez un point de rupture adaptatif basé sur la largeur réelle du contenu plutôt que sur le nom de l'appareil. Les 480px dans cet exemple sont un choix d'apprentissage et ne constituent pas une norme pour toutes les Grilles. Vous pouvez rétrécir l'écran et zoomer sur le texte pour voir les lignes fixes, les longues chaînes et les colonnes supplémentaires créées par les spans afin de vous aider à isoler la cause du débordement.