# Colonnes (/fr/components/columns)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 1080 · updated: 2026-07-30 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md)

Le composant `Columns` vous permet d'organiser du contenu dans une grille responsive. Il est le plus souvent utilisé pour disposer des cartes en grille, en spécifiant le nombre de colonnes. Vous pouvez également utiliser le sous-composant `Column` pour encapsuler du contenu arbitraire. Les colonnes sont responsives et s'ajustent automatiquement aux écrans plus petits.

<Columns cols="2">
  <Card title="Bien démarrer" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M8 10.1667L12.1232 6.04344C13.2481 4.91858 13.8105 4.35614 14.4312 3.90314C15.7047 2.9737 17.1818 2.36187 18.7395 2.11858C19.4988 2 20.2942 2 21.885 2C21.9681 2 22 2.03812 22 2.11504C22 3.70584 22 4.50125 21.8814 5.26046C21.6381 6.81818 21.0263 8.29527 20.0969 9.56878C19.6439 10.1895 19.0814 10.7519 17.9566 11.8768L13.8333 16&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M10.341 8.09838C8.63808 8.09838 6.49778 7.73765 4.9043 8.39769C3.73671 8.88132 2.87754 10.0012 2 10.8787L5.30597 12.2955C6.18208 12.671 5.64651 13.7766 5.50147 14.5018C5.33985 15.3099 5.34886 15.3397 5.93158 15.9224L8.07758 18.0684C8.6603 18.6511 8.69008 18.6602 9.49816 18.4985C10.2234 18.3535 11.329 17.8179 11.7044 18.694L13.1213 22C13.9988 21.1225 15.1187 20.2633 15.6023 19.0957C16.2624 17.5022 15.9016 15.3619 15.9016 13.659&#x22; stroke=&#x22;currentColor&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12 20L11 21&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M4 12L3 13&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M15 4.07996C16.2 4.25996 17.46 4.73996 18.1614 5.45996C19.0576 6.25211 19.68 7.31996 19.92 8.99996&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;square&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M17.94 6.06006L16.5 7.50006&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>">
    Configurez votre projet avec notre guide de démarrage rapide.
  </Card>

  <Card title="Référence de l'API" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M16 6.99998L19.0664 9.64296C20.3554 10.7541 21 11.3096 21 12C21 12.6903 20.3555 13.2459 19.0664 14.357L16 17&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M8 6.99998L4.93365 9.64296C3.64455 10.7541 3 11.3096 3 12C3 12.6903 3.64455 13.2459 4.93365 14.357L8 17&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>">
    Explorez les endpoints, paramètres et exemples de votre API.
  </Card>
</Columns>

```mdx title="Columns example"
<Columns cols={2}>
  <Card title="Bien démarrer">
    Configurez votre projet avec notre guide de démarrage rapide.
  </Card>
  <Card title="Référence de l'API">
    Explorez les endpoints, paramètres et exemples de votre API.
  </Card>
</Columns>
```

<div id="column-sub-component">
  ## Sous-composant Column [#sous-composant-column]
</div>

Utilisez le composant `Column` pour encapsuler du texte ou du code dans des colonnes individuelles. C'est utile lorsque vous souhaitez afficher du contenu arbitraire côte à côte, pas seulement des cartes ou d'autres composants.

<Columns cols="2">
  **Installation**

  ```bash
  npm install my-package
  ```

  **Usage**

  ```javascript
  import { init } from 'my-package';
  init();
  ```
</Columns>

````mdx title="Column sub-component example"
<Columns cols={2}>
  <Column>

  **Installation**

  ```bash
  npm install my-package
  ```

  </Column>
  <Column>

  **Usage**

  ```javascript
  import { init } from 'my-package';
  init();
  ```

  </Column>
</Columns>
````

<div id="properties">
  ## Propriétés [#propriétés]
</div>

<ResponseField name="cols" type="number" default="2">
  Le nombre de colonnes par ligne. Accepte des valeurs de 1 à 4.
</ResponseField>