Générateur CSS Grid
Générateur de mise en page CSS Grid gratuit en ligne, éditeur visuel
Bases de CSS Grid Layout
CSS Grid est un système de mise en page bidimensionnel pour arranger des éléments en lignes et colonnes. Propriétés clés : grid-template-columns définit les pistes de colonnes, grid-template-rows définit les pistes de lignes, gap contrôle l'espacement et grid-area positionne les éléments. Grid excelle dans les mises en page au niveau de la page.
Comment utiliser le générateur de grille
Définissez le nombre de colonnes et de lignes. L'aperçu montre la mise en page en grille. Ajustez les tailles et les espaces. Copiez le code CSS généré pour votre projet.
▶Quand dois-je utiliser Grid plutôt que Flexbox ?
Utilisez Grid pour les mises en page bidimensionnelles (lignes ET colonnes simultanément). Utilisez Flexbox pour les mises en page unidimensionnelles (soit une ligne SOIT une colonne). Grid est meilleur pour les mises en page de page ; Flexbox est meilleur pour les mises en page de composants.
▶Qu'est-ce que l'unité fr en CSS Grid ?
fr (fraction) est une unité flexible qui distribue l'espace restant. grid-template-columns: 1fr 2fr donne à la deuxième colonne deux fois l'espace de la première. C'est similaire à flex-grow en Flexbox.
▶Les éléments Grid peuvent-ils s'étendre sur plusieurs cellules ?
Oui. Utilisez grid-column: span 2 ou grid-row: span 2 pour qu'un élément s'étende sur plusieurs colonnes ou lignes. Vous pouvez aussi utiliser des zones de grille nommées pour des mises en page complexes.