Developer Tools
Web UtilitiesConcepteur de mise en page en grille
Concepteur visuel CSS Grid pour créer des mises en page en grille responsives. Personnalisez les colonnes, les lignes et les espaces et générez instantanément du code CSS Grid prêt à la production.
Configuration de la grille
Modèles de démarrage rapide
Concepteur visuel de grille
Code généré
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
width: 400px;
height: 300px;
}HTML
<div class="grid-container">
</div>Comment utiliser
Positionnement de grille
1 / 2- starts at line 1, ends at line 21 / 3- spans 2 columns/rowsspan 2- spans 2 tracks from start position1 / -1- spans from first to last line
Conseils
- Use fr units for flexible columns
- Try different gap values for spacing
- Use span values for easier positioning
- Click cells to edit their properties
Outils connexes
À propos du concepteur de mise en page en grille
Comment ça fonctionne
- Configurez les dimensions et l'espacement de la grille
- Ajoutez et positionnez les cellules dans le concepteur visuel
- Modifiez le contenu, le nom de classe et la couleur de fond des cellules
- Utilisez des modèles prédéfinis pour démarrer rapidement
- Copiez ou téléchargez le code CSS et HTML généré
Cas d'utilisation courants
- Conception et prototypage de mises en page de sites web
- Apprentissage des fondamentaux de CSS Grid
- Création de mises en page en grille responsives
- Designs de tableaux de bord et interfaces d'administration
- Systèmes de mise en page basés sur les cartes
Foire aux questions
Qu'est-ce que CSS Grid et comment cet outil aide-t-il ?
CSS Grid est un puissant système de mise en page permettant de créer des mises en page complexes et responsives avec des lignes et des colonnes. Cet outil fournit une interface visuelle pour concevoir des grilles sans écrire de code manuellement, puis génère le CSS et l'HTML correspondants.
Comment spécifier les positions de grille pour mes éléments ?
Les positions de grille utilisent le format "début / fin" où les chiffres font référence aux lignes de grille. Par exemple, "1 / 3" signifie commencer à la ligne 1 et terminer à la ligne 3 (couvrant 2 pistes). Vous pouvez également utiliser "span 2" pour couvrir 2 pistes depuis la position de départ.
Puis-je créer des mises en page de grille responsives avec cet outil ?
Oui ! L'outil génère du code CSS Grid qui est intrinsèquement responsive. Vous pouvez définir la largeur du conteneur à "100%" pour une réactivité totale. Pour un comportement responsive plus complexe, vous pouvez combiner le code généré avec des media queries CSS.
Que sont les mises en page prédéfinies et comment les utiliser ?
Les mises en page prédéfinies sont des motifs de grille courants comme Entête+Contenu+Barre latérale, Grille de tableau de bord et Mise en page de cartes qui fournissent des points de départ. Cliquez sur un modèle pour appliquer instantanément sa configuration, puis personnalisez-le.
Comment ajouter, modifier ou supprimer des éléments de grille ?
Cliquez sur "Ajouter une cellule" pour créer de nouveaux éléments. Cliquez sur une cellule existante pour la sélectionner et la modifier. Lorsqu'une cellule est sélectionnée, vous pouvez modifier son contenu, son nom de classe, sa position et sa couleur d'arrière-plan.
Que contrôlent les options de configuration de la grille ?
Les colonnes et les lignes définissent le nombre de pistes. L'espacement contrôle l'espace entre les éléments. La largeur et la hauteur définissent les dimensions globales du conteneur. Le nom de classe du conteneur définit la classe CSS pour le conteneur principal dans le code généré.
Puis-je exporter ma mise en page de grille pour l'utiliser sur mon site ?
Absolument ! L'outil génère du code CSS et HTML que vous pouvez copier ou télécharger. Le CSS inclut toutes les propriétés de grille nécessaires et le positionnement des éléments. Copiez simplement le code et collez-le dans votre projet.
Comment comprendre le concepteur visuel de grille ?
Le concepteur visuel affiche un aperçu en direct de votre mise en page. Les lignes de grille définissent les pistes, et les rectangles colorés représentent vos éléments positionnés selon les valeurs de grid-column et grid-row. Cliquez sur les éléments pour les sélectionner.
Que sont les unités fr et quand les utiliser ?
Les unités fr (fractionnaires) distribuent l'espace disponible proportionnellement dans CSS Grid. Cet outil utilise "repeat(n, 1fr)" par défaut pour des tailles égales. Vous pouvez modifier le CSS généré pour utiliser différentes valeurs fr comme "1fr 2fr 1fr" pour des colonnes en proportions 1:2:1.
Puis-je créer des mises en page complexes de style magazine ?
Oui ! Utilisez des positions de grille qui se chevauchent pour créer des mises en page de style magazine. Par exemple, définissez un élément pour couvrir plusieurs colonnes et lignes tout en plaçant des éléments plus petits dans les cellules restantes.
Le code CSS généré est-il compatible avec tous les navigateurs ?
Le code CSS Grid généré fonctionne dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) et est pris en charge depuis 2017. Pour les navigateurs plus anciens, vous devrez peut-être ajouter des mises en page alternatives utilisant flexbox ou floats.
Comment en apprendre davantage sur les propriétés et techniques CSS Grid ?
Cet outil est idéal pour apprendre CSS Grid par l'expérimentation ! Essayez différentes configurations, examinez le code généré et voyez comment les modifications affectent la mise en page. La section d'aide explique la syntaxe de positionnement de grille.