Générateur CSS Grid
Constructeur visuel de mises en page CSS Grid avec génération de code
Paramètres de mise en page
Mises en page prédéfinies
Placement individuel des éléments
Sélectionnez un élément dans l’aperçu ou la liste pour modifier ses propriétés.
Aide-mémoire CSS Grid
Pistes de grille
Utilisez les unités fr pour les pistes flexibles, px/% pour les pistes fixes et auto pour les pistes dimensionnées selon le contenu.
Fonction repeat()
repeat(3, 1fr) est un raccourci pour 1fr 1fr 1fr. Utilisez auto-fill ou auto-fit pour des grilles adaptatives.
Éléments étendus
Utilisez span N pour couvrir N pistes, ou 1 / -1 pour couvrir toutes les colonnes/lignes.
Aperçu en direct
Les étiquettes des lignes indiquent les 200 premières pistes. Votre CSS et votre mise en page sont intégralement conservés.
CSS généré
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Modifiez les paramètres ou sélectionnez un élément. L’aperçu et le CSS se mettent à jour ensemble.
À propos du générateur CSS Grid
Le générateur CSS Grid est un outil visuel interactif pour concevoir et générer des mises en page CSS Grid. CSS Grid Layout est le système de mise en page bidimensionnel le plus puissant de CSS : il permet de définir simultanément les colonnes et les lignes. Cet outil offre une approche pratique pour apprendre, expérimenter et générer du code CSS Grid prêt pour la production.
Fonctionnalités principales
- Contrôle complet de grid-template-columns et grid-template-rows avec saisie libre
- Boutons rapides de colonnes et de lignes pour prototyper vite avec des pistes de taille égale
- Curseurs row-gap et column-gap indépendants pour un contrôle précis de l'espacement
- Contrôles d'alignement justify-items et align-items
- Placement grid-column et grid-row par élément avec boutons de valeurs rapides
- Libellés personnalisés pour les éléments de la grille afin de visualiser les zones sémantiques de la mise en page
- Éléments numérotés aux couleurs pastel avec indicateurs de numéros de lignes de la grille
- Mises en page prédéfinies : Blog, Tableau de bord, Galerie photo et Page d'atterrissage
- Code CSS généré automatiquement avec copie en un clic
- Prise en charge complète du mode sombre
Comprendre CSS Grid
CSS Grid consiste à définir un conteneur de grille avec des pistes (colonnes et lignes) explicites ou implicites. Les éléments placés dans le conteneur sont automatiquement positionnés dans les cellules, ou vous pouvez les placer explicitement avec les propriétés grid-column et grid-row pour qu'ils s'étendent sur plusieurs pistes. L'unité fr représente une fraction de l'espace disponible, ce qui simplifie les mises en page adaptatives. La fonction repeat() simplifie les définitions de pistes répétitives, et des fonctions comme minmax() ainsi que auto-fill/auto-fit permettent de créer de véritables grilles adaptatives sans media queries.
Modèles de mise en page CSS Grid courants
CSS Grid est idéal pour les mises en page à l'échelle d'une page : blogs avec zones d'en-tête, de barre latérale, de contenu et de pied de page ; interfaces de tableau de bord avec navigation, contenu principal et zones de widgets ; galeries photo dont les éléments s'étendent sur plusieurs lignes et colonnes pour un effet proche de la maçonnerie ; et pages d'atterrissage avec sections héros pleine largeur, grilles de fonctionnalités multicolonnes et zones d'appel à l'action. Utilisez les boutons de modèles pour explorer immédiatement ces motifs.
Grid ou Flexbox
Flexbox est conçu pour les mises en page unidimensionnelles (une seule ligne ou colonne), tandis que CSS Grid excelle dans les mises en page bidimensionnelles où il faut contrôler les deux axes en même temps. Grid convient le mieux aux mises en page de pages et aux agencements de composants complexes, alors que Flexbox est idéal pour répartir l'espace entre des éléments sur une seule ligne. De nombreux designs modernes utilisent les deux ensemble : Grid pour la structure globale de la page et Flexbox pour l'alignement au niveau des composants.
À qui s'adresse cet outil ?
- Développeurs web qui construisent des mises en page avec CSS Grid
- Ingénieurs frontend qui prototypent des systèmes de grilles adaptatives
- Designers UI/UX qui visualisent des structures de grille avant l'implémentation
- Étudiants qui apprennent les techniques de mise en page CSS bidimensionnelles
- Formateurs qui enseignent les concepts de CSS Grid en atelier ou en cours
- Toute personne qui a besoin de générer rapidement du code CSS Grid pour ses projets web