CSS grid generator : créez votre grille sur mesure
Générateur CSS Grid est un css grid generator visuel et gratuit qui fonctionne entièrement dans votre navigateur. Définissez le nombre de colonnes, de lignes et l'espacement, puis faites glisser votre curseur pour dessiner vos zones nommées. L'outil génère automatiquement le code CSS et HTML prêt à être copié, sans inscription ni transfert de données.
Comment faire une grille en CSS
Pour concevoir votre disposition sur mesure, l'outil s'utilise très simplement étape par étape :
- Ajustez les curseurs Colonnes et Lignes (de 1 à 24) ainsi que le curseur Espace (de 0 à 128 pixels).
- Cliquez sur une cellule de la grille et faites glisser la souris jusqu'à l'angle opposé pour tracer une zone rectangulaire.
- Renommez vos zones dans la liste Zones avec des termes clairs comme
headerousidebar. - Cliquez sur le bloc CSS ou HTML, ou sur son bouton Copier, pour placer le code généré dans votre presse-papiers.
Créer une grille avec un grid template areas generator
L'utilisation de la propriété grid-template-areas permet de structurer votre conteneur avec des noms de zones explicites. Chaque zone dessinée reçoit un nom automatiquement nettoyé pour respecter les règles du CSS : lettres minuscules, chiffres, tirets et tirets bas, en débutant obligatoirement par une lettre.
Les zones doivent former des rectangles contigus et ne peuvent pas se chevaucher. Si votre sélection touche une zone déjà existante, la boîte devient rouge et la zone n'est pas créée. Pour réattribuer des cellules, supprimez une zone avec l'icône de corbeille dans la liste Zones.
Créer une grid 6 colonnes CSS et personnaliser les pistes
Par défaut, l'outil génère des pistes de taille égale sous la forme repeat(6, 1fr) si vous choisissez de créer une grid 6 colonnes CSS. La valeur choisie pour l'espacement s'applique sur la propriété gap du conteneur.
Ouvrez le panneau Dimensionnement avancé pour définir la largeur ou la hauteur de chaque piste de façon indépendante. Vous pouvez saisir des valeurs en 1fr, 240px, 25%, auto, min-content, max-content, fit-content(300px) ou utiliser la fonction minmax(100px, 1fr). Si une saisie n'est pas un code CSS valide, le champ passe au rouge et l'outil applique automatiquement la valeur 1fr.
Exemple de css grid generator responsive
Le code généré est du CSS pur, sans aucune dépendance à un framework. Pour adapter votre grille aux écrans de smartphones, privilégiez les unités flexibles comme fr ou minmax().
Pour créer un rendu adaptatif, conservez votre structure HTML et redéfinissez la propriété grid-template-areas au sein d'une requête média (media query) afin de réordonner toutes vos zones sur une seule colonne pour les écrans etroits.
Foire aux questions
Comment créer une grille en CSS ?
Pour créer une grille en CSS, appliquez la propriété display: grid sur un conteneur parent, puis définissez ses colonnes et ses lignes avec grid-template-columns et grid-template-rows. Placez ensuite les éléments enfants dans la structure. Cet outil génère automatiquement tout le code CSS et HTML nécessaire à partir de votre dessin.
Comment utiliser grid-template-areas ?
Pour utiliser grid-template-areas, attribuez un nom à chaque zone de votre disposition et rédigez une chaîne de caractères représentant chaque ligne du conteneur. Indiquez un point pour laisser une cellule vide. Chaque élément enfant revendique ensuite sa zone à l'aide de la propriété grid-area.
À quoi sert l'unité fr en CSS Grid ?
L'unité fr représente une fraction de l'espace disponible restant dans le conteneur de grille une fois les tailles fixes et les espaces retirés. Par exemple, une configuration 1fr 2fr attribue au second élément deux fois plus de largeur qu'au premier. Par défaut, l'outil génère des pistes égales écrites sous la forme repeat(colonnes, 1fr).
Comment fonctionne la fonction minmax() en CSS ?
La fonction minmax(min, max) définit une plage de taille pour une colonne ou une ligne qui ne sera jamais plus petite que la valeur min ni plus grande que max. Par exemple, minmax(100px, 1fr) garantit une largeur minimale de 100 pixels tout en permettant à la piste de grandir si de l'espace est disponible. Vous pouvez saisir cette fonction dans le panneau Dimensionnement avancé.
Comment ajouter du gap entre les colonnes et les lignes ?
Pour ajouter de l'espace entre les cellules, appliquez la propriété gap sur le conteneur de grille, par exemple gap: 16px. Cela crée un espacement uniforme entre les rangées et les colonnes sans ajouter de marge sur les bords extérieurs du conteneur. Réglez le curseur Espace de 0 à 128 pixels pour mettre à jour cette valeur.
Comment faire une grille CSS responsive ?
Pour faire une grille CSS responsive, utilisez des unités flexibles comme fr ou minmax() et redéfinissez la propriété grid-template-areas dans une requête média. Sur un écran étroit, vous pouvez réordonner les zones nommées sur une seule colonne sans toucher au code HTML. Le CSS produit par cet outil est entièrement personnalisable.
Quelle est la différence entre CSS Grid et Flexbox ?
CSS Grid est un système de mise en page bidimensionnel conçu pour gérer simultanément les colonnes et les lignes d'un conteneur. Flexbox est principalement unidimensionnel et organise les éléments le long d'un seul axe, horizontal ou vertical. Utiliser Grid convient particulièrement aux dispositions globales comportant des zones nommées.
Recommandés
-
Carnet de croquis web design (quadrillage de points)Esquissez la mise en page sur papier avant de la tracer ici
-
CSS: The Definitive Guide (Meyer et Weyl)La référence qui détaille chaque propriété de grille de votre code
-
Écran portable 15,6 pouces (USB-C)Gardez l'aperçu sur un second écran pendant que vous ajustez la grille
Aide à garder les outils gratuits. ✨
Images non contractuelles. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
