Grid Generator

Construisez des grilles CSS responsives : choisissez le nombre de colonnes et de lignes ainsi que l'espacement, et copiez le code généré.

Paramètres

Aperçu

Code


            
            
            

Guide d'utilisation

CSS Grid crée des grilles à deux dimensions. grid-template-columns: repeat(3, 1fr) crée 3 colonnes égales ; l'unité fr répartit l'espace disponible.

  • Combinez avec minmax() et auto-fill pour des grilles responsives.
  • gap gère l'espacement entre lignes et colonnes.

FAQ

C'est quoi l'unité fr ?

fr (fraction) répartit l'espace restant : repeat(3, 1fr) crée trois colonnes de largeur égale qui s'adaptent au conteneur.

Grid ou Flexbox ?

Grid excelle pour les mises en page 2D (lignes ET colonnes), Flexbox pour les alignements sur un seul axe.