Entrez la largeur du conteneur, le nombre de colonnes voulu, l'espace entre les colonnes et la marge extérieure. L'outil calcule la largeur de chaque colonne et génère le code CSS Grid correspondant.
Entrez une largeur de conteneur positive, au moins une colonne, et une gouttière et une marge de zéro ou plus.
Copié dans le presse-papiers.
Pourquoi utiliser un système de grille en design web
Un système de grille divise une page en un nombre fixe de colonnes séparées par des gouttières régulières, puis aligne chaque élément sur cette structure. La mise en page gagne un rythme visuel que le lecteur remarque sans forcément savoir le nommer : titres, images et blocs de texte s'alignent les uns avec les autres au lieu de flotter à des positions arbitraires. Sur un site responsive, la grille donne aussi un seul jeu de règles à adapter selon la largeur de l'écran, plutôt que de repositionner chaque élément à la main pour chaque taille.
CSS Grid, Flexbox, Bootstrap : quoi choisir, et la place de Tailwind CSS
CSS Grid fonctionne en deux dimensions, lignes et colonnes en même temps, ce qui en fait un bon choix pour la structure globale d'une page ou une grille de cartes alignées dans les deux sens. Flexbox travaille sur un seul axe (ligne ou colonne) et convient à des composants plus petits comme une barre de navigation ou un groupe de boutons, où les éléments doivent se répartir ou s'aligner le long d'une seule ligne. La grille de Bootstrap est un système à 12 colonnes construit au-dessus de Flexbox, livré sous forme de classes prêtes à l'emploi (col-6, col-4, etc.) : elle reste très enseignée dans les formations web françaises, des BTS SIO aux organismes de formation en ligne, car elle évite d'écrire du CSS personnalisé pour obtenir une mise en page fonctionnelle. Tailwind CSS gagne du terrain auprès du même public avec une approche différente, des classes utilitaires appliquées directement dans le balisage plutôt que des composants de grille nommés, adaptée aux développeurs qui veulent un contrôle fin sans quitter leur HTML. Pour un nouveau projet sans framework existant, du CSS Grid pur donne en général un résultat plus propre avec moins de balisage que les deux autres.
Limites du code généré
Le code produit par cet outil est un point de départ pour un seul point de rupture, à largeur fixe. Il ne génère pas de media queries, donc le nombre de colonnes et la gouttière restent identiques à toutes les largeurs d'écran tant que vous n'ajoutez pas vos propres points de rupture. En pratique, une mise en page passe souvent à moins de colonnes sur mobile (4 est courant) et à un nombre intermédiaire sur tablette (8 est courant), en gardant le nombre complet seulement sur ordinateur. Réduisez le nombre de colonnes et ajustez la gouttière dans une media query pour chaque point de rupture dont votre design a besoin.
Bonnes pratiques de gouttière et de marge
Les valeurs de gouttière courantes en design web sont 8px, 16px et 24px, correspondant en général à une échelle d'espacement déjà utilisée ailleurs sur le site (boutons, marges internes, marges externes) pour que la mise en page paraisse cohérente plutôt qu'arbitraire. La grille à 12 colonnes vient elle-même de l'imprimerie, où une page divisée en 12 parties se répartissait proprement en moitiés, tiers, quarts ou sixièmes, une propriété que le design web a conservée car elle offre la même souplesse pour l'étendue des colonnes. Une marge égale ou supérieure à la gouttière évite que le bord extérieur de la mise en page paraisse serré contre le bord de l'écran. Pour des proportions fondées sur le ratio d'une page ou d'une image plutôt que sur un nombre de colonnes, voir le Calculateur de ratio d'image, et pour un espacement fondé sur le nombre d'or, voir le Calculateur de nombre d'or.