CSS Grid en pratique Des arrangements utiles sans framework

Flexbox ou Grid ? Utilisez les deux. Flexbox gère une seule direction — ligne ou colonne. CSS Grid gère les deux en même temps. Cette distinction guide toutes vos décisions de mise en page.

Les propriétés qui comptent vraiment

Vous pouvez construire presque chaque mise en page que vous rencontrerez avec cinq propriétés : grid-template-columns, grid-template-rows, gap, grid-areaet place-items. Voici une carte centrée en six lignes :

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center est un raccourci pour align-items + justify-items. Une ligne, contenu parfaitement centré, sans calcul nécessaire.

L'unité fr : arrêtez de penser en pourcentages

Les pourcentages ne prennent pas en compte les espaces de séparation. fr (unité fractionnaire) distribue l'espace restant après que les valeurs fixes aient été placées. Voici un grille à 12 colonnes standard : Chaque

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

reçoit une part égale de l'espace restant après soustraction de l'espacement. Trois colonnes à 1fr ne dépasseront jamais le conteneur — quelque chose repeat(3, 1fr) peut être mal interprété lorsqu'un espacement est impliqué. 33.33% Auto-fill vs auto-fit : grilles réactives sans requêtes de média

Les deux mots-clés permettent au navigateur de décider combien de colonnes peuvent s'ajuster. La différence apparaît lorsque le nombre d'éléments est inférieur au nombre de colonnes que la grille peut contenir.

auto-fill

garde des colonnes vides. auto-fit les supprime, permettant aux éléments existants de s'étendre pour remplir la ligne. Pour une grille de cartes, vous voulez presque toujours C'est une grille de cartes entièrement réactive. Aucun point de rupture. Chaque carte est au moins de 280px de large, et le navigateur ajuste le nombre de cartes par ligne. Lorsque la fenêtre de navigation diminue en dessous de 280px, elle passe à une seule colonne. Utilisez auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

si vous voulez que trois cartes sur un écran large s'étendent et remplissent la ligne plutôt que de rester dans des colonnes de largeur fixe avec des espaces vides à côté. auto-fit Prototyper ce type de mise en page manuellement prend du temps. Un

générateur de grille CSS en ligne vous permet de configurer visuellement les colonnes, les lignes et les espaces avant d'écrire une seule ligne — une économie de deux minutes pour éviter de déboguer les calculs de colonnes. Des zones nommées : une mise en page lisible

Les zones de grille remplacent le calcul de positions par des noms lisibles. La mise en page idéale — en-tête, barre latérale, contenu principal, pied de page — est un exemple clair :

La chaîne est un plan visuel de votre mise en page. Un point (

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

Le grid-template-areas ) marque une cellule vide. Renommez une section en modifiant la chaîne — sans avoir à recalculer les numéros de lignes..Des mises en page courantes en moins de dix lignes

Une fois que vous avez les bases, la plupart des motifs récurrents se réduisent à quelques lignes seulement.

Barre latérale + contenu :

Sections empilées avec un rythme vertical constant :

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

Grille d'icônes auto-ajustable :

.page-sections {
  display: grid;
  gap: 4rem;
}

Inspecteur de grille dans Chrome DevTools

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Ouvrez DevTools, sélectionnez n'importe quel conteneur de grille dans le panneau Éléments, puis regardez pour le

badge grille près de l'élément. Cliquez dessus pour activer l'overlay de grille — vous obtenez une vue visuelle de chaque colonne, ligne et espacement tracé directement sur la page. Dans le

panneau Layout (à côté de Computed et Styles), vous pouvez contrôler ce que l'overlay affiche : les numéros de lignes, les noms de lignes, les noms de zones et des lignes étendues qui dépassent la limite de la grille. Lorsqu'une mise en page se déforme, l'activation des numéros de lignes tout en observant l'overlay révèle souvent immédiatement la ligne mal alignée — beaucoup plus rapide que la lecture des valeurs brutes dans le panneau Styles. grid-column Un habitude pratique : construisez d'abord la structure dans DevTools, puis transférez les valeurs dans votre feuille de style une fois que la grille semble correcte.

Ce que la grille laisse encore à Flexbox

La grille est la bonne solution pour une structure bidimensionnelle : les sections de page, les arrangements de cartes, les dashboards complexes. Flexbox reste meilleur pour les flux unidimensionnels — les liens de navigation qui s'ajustent, les groupes de boutons, les entrées de formulaire avec étiquettes en ligne, et n'importe où où les éléments doivent s'étendre ou se réduire en fonction de leur contenu plutôt qu'en fonction d'une trajectoire définie.

En pratique, vous utiliserez la grille pour la mise en page externe et Flexbox pour les composants à l'intérieur. Elles s'assemblent harmonieusement ; choisissez celle qui correspond à l'axe du problème.

CSS Grid en pratique : des mises en page utiles sans framework 2

Vous aimerez peut-être aussi