> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-layout.md).

# AX - Mise en page

## Vue d'ensemble

**AX - Mise en page** est un composant Experience Cloud qui organise d’autres composants en lignes et colonnes structurées, avec un dimensionnement et un alignement flexibles sur les pages Experience Sites.

Utilisez-le pour créer des mises en page à plusieurs colonnes, des grilles responsives ou des structures de page personnalisées en faisant glisser et déposer des composants dans les sections de mise en page. Contrôlez la largeur des colonnes, l’espacement, l’alignement et le comportement responsif pour différentes tailles d’écran dans Experience Builder.

Idéal pour les mises en page de tableau de bord, les sections de formulaire, les grilles de contenu, les tableaux de comparaison ou partout où votre portail a besoin d’une organisation structurée du contenu en plusieurs colonnes qui s’adapte au mobile et au bureau.

{% hint style="danger" %}
Ce composant [utilise des slots](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md#understanding-slots) pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.
{% endhint %}

## Configuration

### Propriétés

**Alignement horizontal** ajuste l’alignement horizontal du contenu dans la mise en page, en le gardant équilibré et harmonieux — **Début** (par défaut), **Centre**, **Fin**, **Espace** (espace égal autour de chaque colonne) ou **Réparti** (espace égal entre les colonnes, au ras des bords).

**Alignement vertical** contrôle l’alignement vertical du contenu, en le présentant d’une manière visuellement attrayante qui correspond à vos objectifs de conception — **Début** (par défaut), **Centre**, **Fin** ou **Étendre**.

**Tirer vers la limite** permet au contenu de s’étendre vers les limites de la mise en page, en créant des mises en page qui maximisent l’espace — **Aucun** (par défaut), **Petit**, **Moyen** ou **Grand**.

**Plusieurs lignes** permet à la mise en page d’accueillir du contenu sur plusieurs lignes, en le répartissant dans une séquence structurée et organisée. Activé par défaut.

**Afficher en tant que section** définit la mise en page pour qu’elle apparaisse comme une section distincte dans la page. Activé par défaut.

**Mise en page des colonnes** détermine la manière dont le contenu est affiché dans les colonnes, en établissant une structure en grille pour une disposition systématique et ordonnée — voir [Paramètres de mise en page des colonnes](#column-layout-settings) ci-dessous.

### Paramètres de mise en page des colonnes

Les paramètres de mise en page des colonnes fournissent une flexibilité dans l’organisation du contenu de la page, en veillant à ce qu’il s’adapte de manière responsive aux différentes tailles d’écran et aux différents appareils tout en conservant une apparence propre et structurée.

#### Type

Détermine la nature de la mise en page des colonnes.

* **Options :**
  * **`Flexible`**: Les colonnes de ce type de mise en page ajustent leur taille dynamiquement en fonction du contenu et de l’espace d’écran disponible. Cette option est idéale pour les conceptions responsives où la mise en page doit s’adapter à différentes tailles d’appareils.
  * **`Fixe`**: Cette option maintient une taille constante pour les colonnes, quelle que soit la taille de l’écran ou le volume de contenu. Les colonnes fixes sont utiles lorsqu’une mise en page uniforme et cohérente est requise.
* **Utilisation :** Choisissez **`Flexible`** pour les mises en page fluides qui doivent s’adapter à différentes tailles d’écran, et **`Fixe`** pour les mises en page qui exigent une cohérence dans la largeur des colonnes.

#### Taille

Définit la largeur d’une **`Fixe`** colonne dans la grille. Le système de grille est généralement basé sur une structure en 12 unités.

* **Plage :** de 1 à 12, où chaque unité représente une proportion de la largeur totale disponible.
* **Utilisation :** Attribuez une taille pour définir l’espace que chaque colonne doit occuper. Par exemple, définir une taille de 4 dans une grille de 12 unités signifie que la colonne occupe un tiers de l’espace horizontal disponible.
* **Tailles par appareil :** l’éditeur affiche la taille de l’appareil actuellement prévisualisé dans Experience Builder. Changez la prévisualisation de l’appareil et définissez de nouveau la taille pour donner à la colonne une largeur différente sur les petits, moyens et grands écrans ; tout appareil laissé non défini reprend la taille de base.

#### Flexibilité

Remplace **Taille** quand la colonne **Type** est **`Flexible`** — il contrôle la manière dont la colonne absorbe l’espace supplémentaire ou se rétracte lorsque l’espace est limité.

* **Options :** **`Automatique`**, **`Rétrécir`**, **`Grandir`**, **`Sans rétrécissement`**, **`Sans agrandissement`** et **`Sans flexibilité`**.
* **Utilisation :** Utilisez **`Grandir`** pour laisser une colonne absorber l’espace restant dans sa ligne, **`Sans rétrécissement`** pour empêcher une colonne de se réduire sur les petits écrans, et **`Automatique`** pour laisser le navigateur gérer le dimensionnement.

#### Décalage d’alignement

Ajuste la position de la colonne dans son conteneur.

* **Options :**
  * **`Gauche`**: Décale la colonne vers le bord gauche du conteneur.
  * **`Droite`**: Déplace la colonne vers le bord droit.
  * **`Haut`**: Aligne la colonne plus près du haut du conteneur.
  * **`Bas`**: Positionne la colonne près du bas du conteneur.
* **Utilisation :** Utilisez ce paramètre pour affiner la position des colonnes par rapport à leur environnement, en améliorant l’attrait visuel de la mise en page et l’équilibre spatial.

#### Remplissage

Contrôle l’espacement interne de la colonne.

* **Options :** **`Horizontal petit`**, **`Horizontal moyen`** et **`Horizontal grand`** ajuste le remplissage à gauche et à droite de la colonne ; **`Autour petit`**, **`Autour moyen`** et **`Autour grand`** ajoute un remplissage sur tous les côtés.
* **Utilisation :** Appliquez un remplissage pour créer de l’espace à l’intérieur de la colonne, en veillant à ce que le contenu ne soit pas collé aux bords, ce qui améliore la lisibilité et l’esthétique visuelle.

Les paramètres de mise en page des colonnes du composant Avonni Layout sont essentiels pour créer des mises en page soignées et fonctionnelles dans les sites Salesforce Experience Cloud.

## Cas d'utilisation

| Name                                                                                                                                                                   | Description                                                                                                                                 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| [**Créer une mise en page en grille**](/experience-cloud/experience-cloud-fr/tutoriels/use-cases/creating-a-grid-layout.md)                                            | Apprenez à créer une mise en page en grille dynamique avec les composants Avonni pour mettre en valeur des produits ou des fonctionnalités. |
| [**Configurer Avonni Layout pour qu’il soit responsif**](/experience-cloud/experience-cloud-fr/tutoriels/components/layout/configuring-the-layout-to-be-responsive.md) | Apprenez à créer des mises en page responsives et conviviales avec Avonni Layout dans Experience Cloud sur divers appareils.                |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-layout.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.