Générateur de CSS Grid
Choisissez les colonnes, les lignes et l’espace entre elles, ou utilisez le mode responsive pour que les cartes se réorganisent toutes seules selon l’écran. L’aperçu montre le résultat aussitôt.
Mode d’emploiMise en page avec CSS Grid
Faites glisser le coin de l’aperçu pour tester des largeurs. Touchez un élément pour qu’il occupe 2 colonnes.
Disponible en: 
Générateur de CSS Grid: à quoi ça sert
Choisissez des colonnes fixes (avec des raccourcis pour 2, 3 et 4 colonnes, contenu avec barre latérale et menu avec contenu) ou le mode responsive, dans lequel les colonnes s’ajustent à la largeur avec repeat(auto-fit, minmax()). Définissez le nombre d’éléments et l’espace entre eux.
Touchez un élément de l’aperçu pour qu’il occupe deux colonnes et faites glisser le coin de l’aperçu pour tester des largeurs. Le CSS et le HTML sont prêts à copier.
Mode d’emploi
- Choisissez le mode et les colonnes.
- Définissez les éléments et l’espace ; touchez des éléments pour occuper 2 colonnes.
- Copiez le CSS et le HTML.
Quand l’utiliser
- Grilles de cartes, de produits et de photos.
- Mises en page avec barre latérale.
- Apprendre CSS Grid en voyant le résultat.
Questions fréquentes
Que signifie 1fr ?
Une fraction de l’espace restant. Trois colonnes 1fr 1fr 1fr divisent la largeur en parts égales ; 2fr 1fr donne à la première colonne le double de la deuxième.
Que fait repeat(auto-fit, minmax(220px, 1fr)) ?
Il crée autant de colonnes que possible, chacune d’au moins 220px, et étire les colonnes pour occuper toute la ligne. C’est la façon la plus simple de faire une grille de cartes responsive sans media queries.
Comment faire occuper deux colonnes à un élément ?
Utilisez grid-column: span 2 sur l’élément. Dans l’aperçu, touchez un élément pour alterner entre 1 et 2 colonnes, et le CSS est mis à jour.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.