Colonnes

Le composant Colonnes vous donne un contrôle puissant sur la mise en page et l’agencement de vos composants dynamiques.

Configuration de vos colonnes

1. Configurer la mise en page générale

Avant d'ajouter du contenu à vos colonnes, il est utile de définir la mise en page et la structure générales du composant Colonnes.

Alignement horizontal

Ce réglage détermine comment l'ensemble de la grille de colonnes est positionné horizontalement dans son conteneur.

• Gauche: Aligne les colonnes sur le côté gauche du conteneur.

• Centre: Centre les colonnes à l'intérieur du conteneur.

• Droite: Aligne les colonnes sur le côté droit du conteneur.

Ceci est utile pour garantir que votre contenu semble équilibré ou aligné selon votre intention de conception sur différentes tailles d'écran.

Alignement vertical

Ceci contrôle le positionnement vertical des colonnes dans le conteneur.

• Haut: Aligne toutes les colonnes en haut du conteneur.

• Milieu: Centre les colonnes verticalement.

• Bas: Aligne toutes les colonnes en bas du conteneur.

Ce réglage est crucial pour les mises en page avec des hauteurs de colonne variables, garantissant que toutes les colonnes s'alignent de manière uniforme.

Autoriser le retour à la ligne

Lorsqu'il est coché, cette option permet aux colonnes de passer sur de nouvelles lignes si la taille de l'écran ou la largeur du conteneur n'accommode pas toutes les colonnes sur une seule ligne. Cela est essentiel pour le design réactif, en veillant à ce que votre mise en page reste fonctionnelle et esthétique sur différents appareils.

2. Créer des colonnes

Une fois que vous avez défini la mise en page générale, vous pouvez ajouter des colonnes individuelles à votre composant.

Ajouter des colonnes

3. Personnaliser chaque colonne

Après avoir ajouté vos colonnes, vous pouvez personnaliser chacune individuellement pour obtenir la mise en page et l'apparence souhaitées.

Largeur fixe ou flexible

• Fixe: Définit une largeur spécifique pour la colonne. Ceci est utile lorsque vous avez besoin d'un contrôle précis sur la mise en page, par exemple pour des en-têtes ou des zones de contenu spécifiques qui ne doivent pas se redimensionner avec l'écran.

• Flexible: La largeur de la colonne sera dynamique, et des ajustements seront effectués en fonction du contenu et de l'espace disponible. Ceci est idéal pour le design réactif, où la taille du contenu peut varier.

Flexibilité : Pour les colonnes flexibles, vous pouvez affiner davantage leur comportement en utilisant le réglage « Flexibilité » :

• Auto : La colonne ajustera automatiquement sa largeur en fonction du contenu et de l'espace disponible.

• Réduire : La colonne peut se réduire s'il n'y a pas suffisamment d'espace pour afficher toutes les colonnes sur une seule rangée.

• Grandir : La colonne peut s'agrandir pour remplir tout espace supplémentaire dans le conteneur.

• Pas de réduction : Empêche la colonne de se réduire, même si l'espace est limité.

• Pas d'agrandissement : Empêche la colonne de s'agrandir, même si un espace supplémentaire est disponible.

• Pas de flexibilité : Désactive complètement la flexibilité, faisant se comporter la colonne comme une colonne à largeur fixe.

Décalage d'alignement

Ce réglage vous permet de contrôler la façon dont la colonne s'aligne par rapport aux colonnes adjacentes. Vous pouvez « décaler » l'alignement vers la gauche, la droite, le haut ou le bas pour créer une séparation visuelle ou un groupement entre les colonnes.

Rembourrage

Vous pouvez ajuster le rembourrage pour ajouter de l'espace autour du contenu à l'intérieur d'une colonne. Choisissez parmi différentes options de rembourrage pour ajouter de l'espace aux côtés gauche et droit de la colonne ou à tous les côtés.

Ajuster ces paramètres vous permet de créer des mises en page complexes et réactives qui s'adaptent bien à différents contextes de visualisation, garantissant que votre design est esthétique et fonctionne efficacement sur divers appareils et tailles d'écran.

Tutoriels

Créer une mise en page réactive à 3 colonnes