Générateur de Grid CSS
Créez des layouts CSS Grid interactifs.
cliquez sur Cellule pour développer
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}Generateur visuel de layouts CSS Grid
CSS Grid Layout est le systeme de mise en page bidimensionnel le plus puissant disponible en CSS. Contrairement a Flexbox, qui fonctionne sur un seul axe (ligne ou colonne), CSS Grid permet de controler les lignes et les colonnes simultanement, ce qui le rend ideal pour creer des mises en page completes, des galeries d'images, des tableaux de bord et tout design necessitant une structure de grille precise et previsible.
Notre generateur visuel vous permet de definir le nombre de colonnes et de lignes, de personnaliser les modeles de taille (grid-template-columns et grid-template-rows) en utilisant des unites comme fr, px, % ou auto, d'ajuster les espaces entre les cellules (column-gap et row-gap), et d'agrandir les cellules individuelles pour qu'elles occupent plusieurs colonnes ou lignes en utilisant grid-column: span et grid-row: span.
L'apercu se met a jour en temps reel, montrant exactement a quoi ressemblera votre grille. Cliquez sur n'importe quelle cellule pour la selectionner et utiliser les controles d'expansion pour qu'elle occupe plus d'une colonne ou ligne. Le code CSS genere inclut toutes les proprietes necessaires pour reproduire la mise en page exacte que vous voyez dans l'apercu, pret a etre copie et utilise dans votre projet.
Questions fréquentes
Que signifie l'unite « fr » ?
L'unite « fr » (fraction) represente une fraction de l'espace disponible dans le conteneur grid. Par exemple, « 1fr 2fr » cree deux colonnes ou la seconde est deux fois plus large que la premiere. C'est similaire a flex-grow mais plus intuitif pour definir des proportions.
CSS Grid remplace-t-il Flexbox ?
Non, ils se completent. Grid est meilleur pour les mises en page bidimensionnelles (lignes et colonnes), tandis que Flexbox excelle dans les mises en page unidimensionnelles (une ligne ou colonne). Il est courant d'utiliser Grid pour la structure generale de la page et Flexbox pour aligner le contenu au sein de chaque section.
Comment faire pour qu'une cellule occupe plusieurs colonnes ?
Dans notre outil, cliquez sur la cellule et utilisez les boutons « + » pour l'agrandir. En CSS, cela se fait avec « grid-column: span 2 » (pour 2 colonnes) ou « grid-row: span 2 » (pour 2 lignes). Vous pouvez aussi specifier des positions exactes avec « grid-column: 1 / 3 ».