Générateur de grille CSS

Construisez visuellement une grille CSS — définissez les colonnes, les lignes, les lacunes et le dimensionnement de la piste, puis copiez le CSS généré.

How to use CSS Grid Generator

1. Définir le nombre de colonnes et de lignes pour la grille.
2. Choisissez une unité de dimensionnement de piste comme fr, px, auto ou minmax.
3. Régler l'écart de colonne et l'écart de ligne, plus les éléments de justification et les éléments d'alignement.
4. Copiez la grille CSS générée et collez-la dans votre projet.

Quel est {nom} ?

FAQ

Que signifie l'unité fr dans le calibrage de la voie de grille?

L'unité fr représente une fraction de l'espace libre dans le conteneur de grille. En utilisant répéte(3, 1fr) crée trois colonnes de largeur égale qui partagent l'espace disponible, en élargissant et en rétrécissant de façon réactive au fur et à mesure que le conteneur se redimensionne.

Quand dois-je utiliser minmax() au lieu de fr?

Utilisez minmax() lorsque les pistes ont besoin à la fois d'un plancher et d'un plafond, comme minmax(80px, 1fr), qui maintient une colonne d'au moins 80px de large, mais permet de grandir pour remplir l'espace. Plain fr n'a pas de minimum et peut se rétrécir sous les largeurs lisibles sur les petits écrans.

Related tools

• Flexbox Generator
• CSS Gradient Generator
• Border Radius Generator
• Box Shadow Generator