G Une boîte à outils,
chaque tâche de conception

Générateur CSS Grid

Créez visuellement des mises en page CSS Grid avec un aperçu en temps réel.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

G Générateur CSS Grid

Comment utiliser le générateur de grille CSS

Le générateur de grille CSS vous permet de créer visuellement des mises en page de grille CSS sans écrire de code. Utilisez les curseurs pour définir le nombre de colonnes et de lignes, ajuster l'espace entre les cellules et copier instantanément le code CSS complet pour le coller dans votre projet.

CSS Grid est le système de mise en page le plus puissant en CSS. Il gère simultanément les lignes et les colonnes, ce qui le rend parfait pour les structures de pages complexes, les grilles de cartes et les conceptions réactives.

Pro Tips

Frequently Asked Questions

Q: Quelle est la différence entre CSS Grid et Flexbox ?
Quelle est la différence entre CSS Grid et Flexbox ? La grille est conçue pour les mises en page bidimensionnelles (lignes ET colonnes). Flexbox est conçu pour les mises en page unidimensionnelles (ligne OU colonne). Utilisez Grid pour la structure des pages, Flexbox pour l'alignement des composants.
Q: Comment rendre ma grille responsive ?
Comment rendre ma grille responsive ? Utilisez le CSS généré comme point de départ et ajoutez des requêtes @media pour modifier le nombre de colonnes à différents points d'arrêt.
Q: Puis-je utiliser CSS Grid en production ?
Puis-je utiliser CSS Grid en production ? Oui. CSS Grid est pris en charge dans tous les navigateurs modernes depuis 2017. Il est pris en charge à 96 % par les navigateurs mondiaux.
Q: Que signifie 1fr ?
Que signifie 1fr ? fr signifie fraction. 1fr signifie une fraction de l'espace disponible. Si vous avez trois colonnes définies chacune sur 1fr, elles divisent l'espace de manière égale.
Q: Puis-je imbriquer des grilles dans des grilles ?
Puis-je imbriquer des grilles dans des grilles ? Oui, les éléments de grille peuvent eux-mêmes devenir des conteneurs de grille. Créez une grille de page principale, puis utilisez des grilles imbriquées pour des sections individuelles comme une barre latérale ou une zone de contenu.

Couleurs de France

Du bleu de France au rouge coquelicot, la palette française puise dans la mode, l'art et le patrimoine. Des couleurs élégantes et raffinées qui ont marqué l'histoire du design mondial.

Bleu de France #318CE7

Le bleu national utilisé depuis les rois capétiens

Rouge Coquelicot #FF3800

Le rouge éclatant des champs de coquelicots

Vert Émeraude #50C878

La couleur emblématique des bijoux et de la joaillerie

Jaune de Naples #FADA5E

Pigment historique des peintres depuis la Renaissance

Rose Bonbon #F9429E

Le rose sucré de la confiserie et de la mode

Bleu Roi #4169E1

Le bleu royal des armoiries et de Versailles

Bordeaux #800020

Le rouge sombre des vins de la région bordelaise

Gris Perle #B0B7C3

L'élégance discrète des intérieurs parisiens

Lavande #967BB6

Les champs de Provence en été

Crème #FFFDD0

La douceur des façades haussmanniennes

Q: Qu'est-ce que le bleu de France ?
Qu'est-ce que le bleu de France ? Le bleu de France (#318CE7) est la couleur nationale française, héritée du bleu des armoiries royales depuis le XIIe siècle, reprise aujourd'hui par les équipes sportives nationales.
Q: Qu'est-ce que le rouge coquelicot ?
Qu'est-ce que le rouge coquelicot ? Le coquelicot (#FF3800) est un rouge-orangé vif nommé d'après les fleurs de coquelicot qui fleurissent dans les champs français, popularisé par les impressionnistes.