Design / Mise en page

Générateur CSS Grid (constructeur visuel de grid-template-areas)

Définissez les colonnes, les lignes et l’espacement, faites glisser la souris sur les cellules pour créer des zones nommées comme header, sidebar et main, puis copiez le CSS avec grid-template-columns, grid-template-rows et grid-template-areas, prêt à être collé.

Générateur CSS Grid (constructeur visuel de grid-template-areas): Les dimensions des pistes sont écrites au fur et à mesure de la saisie, par exemple 200px 1fr 1fr, et les dimensions répétées deviennent repeat(). Chaque zone devient un nom dans grid-template-areas, avec un point pour les cellules vides, ainsi qu’une règle qui positionne un élément avec grid-area. Comme l’exige CSS, les zones doivent être rectangulaires et ne peuvent pas se chevaucher ; la mise en page est conservée dans ce navigateur. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie
Outils développeur
Exécutions
Dans votre navigateur
Coût
Gratuit · sans inscription
Disponibilité
Prêt à l'emploi
Générateur de grille CSSTraitement local

Fonctionne entièrement dans votre navigateur

Faites glisser le curseur sur les cellules pour créer une zone ; elle peut s’étendre sur plusieurs lignes et colonnes. Saisissez des dimensions de piste telles que 1fr, 200px, auto ou minmax(100px, 1fr).

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Attribuez à chaque élément enfant la classe correspondant à sa zone. Les cellules représentées par un point restent vides.

Zones nommées

Chaque chaîne de grid-template-areas correspond à une ligne, et chaque mot à une cellule : "header header" "sidebar main" place l’en-tête sur les deux colonnes. Un élément enfant avec grid-area: main remplit chaque cellule nommée main. Les noms ne doivent pas nécessairement correspondre aux noms de classes, mais les conserver identiques rend le CSS plus facile à lire.

Tailles de pistes courantes

minmax(200px, 1fr) maintient une colonne à une largeur minimale de 200 px tout en lui permettant de s’agrandir ; auto s’adapte au contenu ; repeat(auto-fill, minmax(12rem, 1fr)) crée autant de colonnes que possible, une structure adaptée aux grilles de cartes. L’espacement peut être rendu fluide avec le générateur CSS clamp.

Comment l'utiliser

  1. Choisissez le nombre de colonnes et de lignes, puis indiquez leurs dimensions.
  2. Faites glisser la souris sur les cellules pour créer des zones, puis renommez-les.
  3. Copiez le CSS et attribuez à chaque élément enfant la classe de sa zone.

Confidentialité et limitations

La mise en page est créée dans votre navigateur.

Outils associés

CSS clamp()Box ShadowFormateur CSSFlexboxClip path

Questions fréquentes

Que signifie fr ?

Une fraction de l’espace disponible : 1fr 2fr donne à la deuxième colonne une largeur deux fois supérieure à celle de la première, après déduction des dimensions fixes et des espacements.

Pourquoi les zones ne peuvent-elles pas se chevaucher ou former un L ?

grid-template-areas accepte uniquement des rectangles, chacun nommé une seule fois. Les éléments qui se chevauchent sont possibles avec CSS Grid, mais ils nécessitent des numéros de lignes explicites plutôt que des zones nommées.

Comment rendre la mise en page responsive ?

Utilisez le CSS généré pour la mise en page large, puis redéfinissez grid-template-columns et grid-template-areas dans une media query pour les écrans étroits.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis