TL
Tool Lab
💰Faire un don
💰Faire un don

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

À propos de cet outil

Le Générateur de Grille CSS vous permet de concevoir visuellement des mises en page bidimensionnelles en ajustant grid-template-columns, grid-template-rows, les propriétés gap et les paramètres d'alignement. L'aperçu en direct montre exactement le résultat avant d'écrire du code.

CSS Grid est le système de mise en page le plus puissant de CSS, conçu pour les mises en page bidimensionnelles (lignes ET colonnes simultanément). Il complète Flexbox qui gère les mises en page unidimensionnelles.

Comment utiliser

  1. Définissez grid-template-columns pour la structure des colonnes. Utilisez les boutons de préréglage pour les motifs courants.
  2. Configurez optionnellement grid-template-rows (laissez auto pour la plupart des mises en page).
  3. Ajustez column-gap et row-gap pour l'espacement.
  4. Utilisez justify-items et align-items pour contrôler le placement des éléments dans les cellules.
  5. Changez le nombre d'éléments avec le curseur pour voir comment la grille réagit.
  6. Cliquez sur Copier pour copier le CSS généré.

Cas d'utilisation

Les développeurs front-end utilisent CSS Grid pour les mises en page, les structures de tableau de bord et les galeries d'images. Les designers exportent des spécifications de grille en CSS exact pour les partager avec les développeurs. Les équipes de système de design l'utilisent pour prototyper des motifs d'espacement et de colonnes.

Questions fréquentes

  • Que signifie 1fr ? — fr est une unité fractionnaire. 1fr signifie une fraction de l'espace disponible. repeat(3, 1fr) crée trois colonnes égales.
  • Quand utiliser Grid plutôt que Flexbox ? — Utilisez Grid pour les mises en page bidimensionnelles (lignes et colonnes). Utilisez Flexbox pour disposer des éléments dans une seule direction.
  • CSS Grid est-il supporté par tous les navigateurs ? — Oui. CSS Grid est entièrement supporté par tous les navigateurs modernes depuis 2017.