Lignes × colonnes
3 × 3
Modèle
repeat(3, 1fr)
Outils de design
Générateur de grille CSS – Lignes, colonnes et espaces
Définissez le nombre de colonnes et de lignes ainsi que les espaces pour générer un affichage de base : disposition en grille. Prévisualisez la structure des pistes, essayez des modèles rapides et copiez du CSS ou du HTML pour les mises en page d'administration et les grilles de cartes.
CSSGrilleMise en page
Accès rapide:Générateur Flexbox
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
Générateur de grille CSS
3
3
3 × 3 网格
.grid {
display: grid;
} Cas d’usage
- Rédiger une grille de cartes à colonnes égales
- Élaborer une grille de page d'administration
- Confirmez rapidement le nombre de colonnes et les valeurs d'espacement
Mode d’emploi
- Définissez les colonnes, les lignes et les espaces
- Aperçu de la structure de la grille
- Copiez le CSS ou le HTML généré
Exemples d’entrée et de sortie
FAQ
Prend-il en charge les zones de grille nommées ?
Il se concentre sur la configuration de base des pistes (souvent égales à des pistes de 1 fr). Les cartes complexes de zone de grille nécessitent toujours du CSS écrit à la main.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Générateur Flexbox
Générateur Flexbox — Mise en page visuelle unidimensionnelle
Ajustez la direction flexible, la justification du contenu, l'alignement des éléments, le retour à la ligne et l'espacement avec un aperçu en direct. Ajoutez ou supprimez des cases pour voir l'habillage et l'espacement, puis copiez le CSS (et l'échafaudage HTML) généré dans votre projet.
Conception CSS Mise en page