D'une idée à une mise en page CSS Grid
CSS Grid organise le contenu en lignes et en colonnes. Ce générateur visuel de grille CSS vous permet de créer des galeries de cartes, des mises en page avec barre latérale et des tableaux de bord sans avoir à écrire chaque règle de grille à la main. L'aperçu utilise le même CSS de mise en page que votre exportation.
Comment générer votre grille
- Choisissez Cartes, Barre latérale ou Tableau de bord comme mise en page de départ.
- Définissez les colonnes, les lignes et les espacements. Sélectionnez un élément pour modifier sa position ou son étendue.
- Testez une largeur d'aperçu plus petite, puis copiez le CSS ou téléchargez un exemple HTML complet.
Adaptatif par conception
Activez « Empiler sur petits écrans » pour générer une media query de 640px. Sur les écrans plus petits, les éléments reviennent sur une seule colonne dans l'ordre du HTML. Les aperçus pour ordinateur et tablette sont mis à l'échelle pour s'adapter à votre espace de travail ; la largeur en pixels affichée est la fenêtre d'affichage réelle de l'aperçu.
Ce que le générateur prend en charge
Utilisez jusqu'à 12 colonnes de largeur égale, 12 lignes et 48 éléments. Les lignes s'agrandissent avec leur contenu. Les éléments ne peuvent pas se chevaucher. La modification du nombre de pistes réorganise vos éléments ; s'ils ne peuvent pas tenir, votre dernière mise en page valide est conservée. Pour des tailles de piste personnalisées, des grilles imbriquées ou des points de rupture supplémentaires, modifiez le CSS exporté dans Phoenix Code.
Questions sur CSS Grid
La mise en page téléchargée nécessite-t-elle une bibliothèque ?
Non. L'exportation utilise du HTML et du CSS Grid natifs. Le HTML téléchargé est un exemple complet avec des styles intégrés, et fonctionne sans ce générateur ni connexion internet.
Quelle est la différence entre CSS Grid et Flexbox ?
Grid gère les lignes et les colonnes ensemble, ce qui le rend utile pour les mises en page et les collections de cartes. Flexbox dispose les éléments le long d'un seul axe, ce qui le rend utile pour les barres d'outils et la navigation. Une page peut utiliser les deux.
Ma mise en page est-elle téléversée quelque part ?
La génération de la mise en page et l'exportation s'exécutent localement dans votre navigateur. Les valeurs de mise en page, les étiquettes et le code généré sont exclus des données analytiques. L'actualisation réinitialise le générateur, donc téléchargez votre HTML pour conserver votre travail.
Poursuivez la création : Visualiseur HTMLFormateur HTMLSélecteur de couleur
CSS généré (lecture seule)
HTML généré (lecture seule)
Élément
Mise en page CSS Grid générée
Ajoutez des lignes ou supprimez un élément pour faire de la place.
Ces pistes ne peuvent pas contenir tous vos éléments. Ajoutez des lignes ou supprimez des éléments au préalable.
Cette position chevauche un autre élément ou dépasse de la grille. Choisissez une position libre ou une étendue plus petite.
Saisissez un nombre entier dans la plage affichée par ce contrôle.
Mise en page actualisée.
Mise en page précédente restaurée.
Code copié.
Impossible d'accéder au presse-papiers. Sélectionnez le code et copiez-le manuellement.
HTML téléchargé. Ouvrez le fichier dans Phoenix Code pour continuer la création.
Impossible de lancer le téléchargement. Copiez plutôt le HTML et le CSS.
Disposition empilée
Mise en page en grille
Élément sélectionné.
Utilisez les touches fléchées pour déplacer cet élément. Maintenez la touche Maj pour modifier son étendue.
Mise en page de départ chargée. Annuler restaure votre travail précédent.
Mise en page de départ chargée.
Ce constructeur prend en charge jusqu'à 48 éléments.
Mise en page par défaut restaurée. La fonction Annuler est disponible.
Mise en page par défaut restaurée.