Editor X : Utiliser les grilles
Temps de lecture : 8 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Les grilles CSS sont un excellent moyen de vous assurer que vos éléments sont organisés de manière structurée. Dans l'Editor X, chaque conteneur et chaque section est livré avec une grille intégrée. Vous pouvez choisir le nombre de lignes et de colonnes dont votre composition a besoin et ajuster leur taille dans de nombreuses mesures différentes.
Dans cet article, découvrez comment utiliser les grilles dans l'Editor X :
Vous voulez en savoir plus ?
Consultez notre cours sur les grilles (en anglais) dans l'académie de l'Editor X.
Ajuster une grille existante
Chaque section et chaque conteneur sont livrés avec une grille 1x1 intégrée que vous pouvez ajuster. Passez à une mise en page différente en un clic, ou créez votre propre grille en faisant glisser les lignes sur votre composition existante.
Pour ajuster la grille :
- Cliquez sur le conteneur ou la section de page correspondante.
- Modifiez la grille de l'une des manières suivantes :
Choisir une mise en page
Personnaliser la grille sur la toile
.
Suggestion :
Vous pouvez également ajouter une section avec une grille intégrée, en cliquant sur l'icône Ajouter une section 
.
.Gérer une grille à partir du panneau Inspecteur
Personnalisez votre grille pour obtenir la mise en page exacte que vous souhaitez. Vous pouvez modifier le nombre de lignes et de colonnes, ajuster leur taille et les espaces entre elles.
Pour gérer une grille :
- Cliquez sur la grille correspondante.
- Cliquez sur l'icône Inspecteur
en haut de l'Editor X. - Cliquez sur l'onglet Mise en page
et faites défiler jusqu'à Affichage. - Effectuez l'une des actions suivantes pour modifier votre grille :
- Choisissez une mise en page différente : Cliquez sur le menu déroulant Mise en page pour sélectionner une apparence différente qui contient le même nombre de cellules que la grille existante.
- Ajustez votre grille manuellement : Cliquez ci-dessous pour savoir comment :
Ajouter plus de colonnes ou rangées
à côté de Colonnes ou Lignes.
à côté d'une colonne ou d'une ligne existante et sélectionnez une option :
Modifier la taille de vos colonnes ou rangées
Modifier la taille des espacements
Supprimer une colonne ou une rangée
Travailler avec des points de rupture :
Lorsque vous personnalisez le design d'une grille, elle n'apparaît que sur le point de rupture spécifique sur lequel vous travaillez. Vous devez créer une grille pour chaque taille d'écran afin de vous assurer que la composition de vos éléments est impeccable.
Positionner des éléments dans une grille
Lorsque vous ajoutez des éléments et que vous les placez sur votre grille, il existe divers outils pour vous aider à créer une mise en page réactive :
Ancrer les éléments
Ancrer les éléments sur les lignes de la grille garantit qu'elles sont positionnées exactement comme vous le souhaitez. Lorsque vous ajoutez un élément à une cellule de la grille, il est automatiquement ancré aux lignes verticales et horizontales les plus proches. Vous pouvez ajuster l'ancrage selon vos besoins à partir du panneau Inspecteur.
Déplacer des éléments vers une autre cellule de la grille
Dans la section Position de la fenêtre inspecteur, vous pouvez sélectionner un élément et voir la ou les cellules de la grille dans lesquelles il est positionné. Cliquez sur n'importe quelle cellule de la grille pour y déplacer l'élément, sans avoir à utiliser le glisser-déposer.
Étirer des éléments pour remplir une cellule de grille
Étirez les éléments pour remplir une cellule de la grille en un seul clic. Si un élément est positionné sur le quadrillage de plus d'une cellule, il est étiré sur toutes les cellules dans lesquelles il se trouve.
Tableau des unités de la grille
Utilisez toute la gamme d'unités CSS pour créer votre grille. Vous pouvez configurer la taille des colonnes et des rangées en utilisant des pourcentages, des pixels ou des fractions. Vous pouvez également paramétrer la taille minimum et maximum des colonnes et des rangées, et même utiliser des calculs pour créer la grille que vous désirez.
Remarque :
Vous pouvez définir la taille de vos lignes et colonnes dans différentes unités. Par défaut, les unités des lignes sont en pixels et les unités des colonnes sont en fr.
Unité | Type d'unité | explication |
|---|---|---|
Fraction (fr) | Fluide | Configurez la taille de vos colonnes/rangées pour en faire une fraction de la taille de la section/conteneur de page. Par exemple, dans une grille de 2 colonnes, si la colonne de gauche est configurée sur 2fr, et celle de droite sur 1fr, la colonne de gauche prendra 2/3 de la section/du conteneur. |
Automatique | Fluide | La hauteur et la largeur des rangées et des colonnes sont automatiquement paramétrées pour s'ajuster au contenu qui s'y trouve. |
Pourcentage (%) | Fluide | Configurez la taille de vos colonnes/rangées pour en faire un pourcentage de la section/du conteneur. |
Pixels (px) | Fixe | Configurez la taille de vos colonnes/rangées pour en faire un nombre fixe de pixels d'écran de la section/du conteneur. 1px = 1/96e de pouce (0,26 mm). |
Largeur de la zone (vw) | Zone d'affichage | Paramétrez la taille de vos colonnes/rangées pour en faire un pourcentage de la largeur de la zone d'affichage (la taille de la fenêtre du navigateur). Par exemple si la zone d'affichage est de 50 cm de large, 1vw = 0,5 cm. |
Hauteur de la zone (vh) | Zone d'affichage | Paramétrez la taille de vos colonnes/rangées pour en faire un pourcentage de la hauteur de la zone d'affichage (la taille de la fenêtre du navigateur). Par exemple si la zone d'affichage est de 50 cm de haut, 1vh = 0,5 cm. |
Min./Max. | Autre | Paramétrez la taille de vos colonnes/rangées sur une mesure minimale et maximale. Vous pouvez choisir n'importe quelle unité de la grille lorsque vous utilisez l'option. |
Min-content | Autre | Paramétrez la taille de vos colonnes/rangées pour qu'elles ne soient jamais plus petites que ce contenu minimum. |
Max-content. | Autre | Paramétrez la taille de vos colonnes/rangées pour qu'elles ne soient jamais plus grandes que ce Max-content. |
calcul | Autre | Créez un calcul en utilisant les unités de la grille pour paramétrer la taille des colonnes/rangées. |
Cela vous a-t-il aidé ?
|