Créer et régler une grille

Une grille organise les enfants d’un conteneur dans des colonnes et des lignes. Elle convient à une liste de services, de produits ou de cartes de présentation.

1. Sélectionner le conteneur des cartes

Dans Calques, sélectionnez le parent des cartes. Dans Expert → Mise en page → Affichage, choisissez Grid.

Le parent définit la grille. Chaque carte reste un enfant avec son propre texte, son image et ses dimensions.

Pour un groupe qui doit simplement suivre un axe, une disposition Flex peut être plus facile à régler.

2. Choisir le nombre de colonnes

Ouvrez Colonnes dans Mise en page. Ajoutez le réglage avec le + du groupe s’il n’est pas encore présent.

Commencez par deux ou trois colonnes sur un écran large. Les cartes se répartissent dans les cases disponibles. Si vous avez trois cartes dans une grille à deux colonnes, une carte passe sur la ligne suivante : vous n’avez pas supprimé de contenu.

Dans la démonstration, nous passons de trois à deux colonnes sur la ligne associée à la tablette et aux écrans plus larges. La ligne de base garde une colonne sur mobile.

3. Laisser les lignes se former ou les régler

Quand les cartes dépassent le nombre de colonnes disponibles, la grille crée les lignes nécessaires. Pour une liste de contenus, ce comportement est souvent suffisant.

Le réglage Lignes permet de définir une structure de lignes lorsqu’un résultat précis l’exige. Il ne remplace pas les dimensions des cartes ni celles de leurs contenus.

Ajoutez Lignes avec le + de Mise en page, puis choisissez le nombre voulu. Dans la démonstration, le parent garde trois colonnes et reçoit deux lignes.

Évitez de fixer trop tôt les hauteurs : des titres plus longs ou une autre langue peuvent demander davantage de place.

4. Régler les espaces

Écart définit la distance entre les cases. Une valeur commune agit dans les deux directions. Le mode séparé distingue l’espace horizontal et vertical.

Pour ajouter de l’espace entre le bord de la grille et ses cartes, réglez sa Marge intérieure. Pour l’éloigner d’une section voisine, utilisez sa Marge.

Régler l’écart entre les éléments.

5. Comprendre le réglage d’une carte

Pour que toutes les cartes suivent une grille commune, continuez à sélectionner leur parent.

Pour modifier la place d’une seule carte, sélectionnez cette carte entière dans les Calques. Dans le groupe Élément de layout, ajoutez Élément Grille, puis ouvrez son sélecteur.

Choisissez combien de colonnes et de lignes cette carte doit occuper. Dans la démonstration, une carte occupe les trois colonnes et deux lignes, tandis que les deux autres cartes restent présentes. Le même panneau propose un alignement propre à cette carte.

Cela change sa place dans la grille, pas le nombre de colonnes du parent. Une occupation trop grande sur mobile peut créer un résultat inattendu : vérifiez aussi les règles de la carte.

6. Comparer mobile, tablette et ordinateur

1. Gardez une colonne lisible sur la ligne de base.
2. Ajoutez une règle d’écran pour augmenter le nombre de colonnes.
3. Comparez les cadres et observez les textes et images.
4. Testez aussi les largeurs intermédiaires.

Une règle à partir de la tablette peut continuer à s’appliquer sur l’ordinateur. Elle n’est pas limitée au cadre nommé « tablette ».

Comprendre les règles d’écran.

7. Retirer un réglage et contrôler le contenu

Retirer une valeur sur une règle d’écran peut laisser reprendre la valeur de base. Retirer le réglage de colonnes n’efface pas les cartes.

Après un changement de type d’affichage, vérifiez les réglages encore présents : certains réglages Flex ou Grid devenus incompatibles peuvent être retirés. Utilisez Annuler si vous vouliez simplement comparer deux idées.