Mise en page CSS Grid à 3 colonnes égales
Concevez visuellement des mises en page CSS Grid : définissez les colonnes, les lignes et l’espacement, puis tapez des noms de zone dans les cellules pour construire grid-template-areas — avec un aperçu en direct et du code CSS et HTML prêt à copier.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de grille réglé sur trois colonnes de largeur égale sur une seule ligne, avec les zones nommées désactivées — la mise en page est simplement repeat(3, 1fr), la manière la plus concise de dire « trois colonnes qui se partagent toujours équitablement la largeur disponible ».
Les colonnes de largeur égale sont le pilier des grilles de cartes, des tableaux tarifaires et des galeries d’images : aucune zone n’a besoin d’être nommée car chaque colonne joue le même rôle, donc un dimensionnement de piste simple est plus clair qu’une déclaration grid-template-areas. Ajoutez une ligne et les trois mêmes pistes se répètent en dessous, toujours parfaitement égales.
Augmentez le nombre de colonnes pour une grille plus dense, ou activez les zones nommées si une colonne ultérieure doit se distinguer des autres — le code CSS et HTML ci-dessous se met à jour à l’instant même. Tout s’exécute côté client, il n’y a donc rien à téléverser et aucune attente.