simple
Générateur CSS Grid — simple
Générer du code CSS Grid layout visuellement.
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px;
How to use Générateur CSS Grid
1
Étape 1 : Choisissez votre Grid Layout
Sélectionnez le nombre de lignes et de colonnes pour votre grid layout. Vous pouvez choisir parmi différents templates pré-conçus ou créer un layout personnalisé à partir de zéro.
2
Étape 2 : Ajouter des Grid Items
Faites glisser et déposez les éléments de la grille sur votre mise en page pour créer un design visuellement attrayant. Vous pouvez ajuster la taille, la couleur et la position de chaque élément selon vos besoins.
3
Étape 4 : Générer le code CSS
Une fois que vous avez conçu votre grid layout, cliquez sur le bouton 'Generate CSS' pour recevoir un code CSS personnalisé que vous pouvez copier et coller dans votre fichier HTML.