mintlify__docs/fr/components/columns.mdx

---
title: "Colonnes"
description: "Organisez des cartes et d'autres composants dans une grille responsive avec le composant columns."
keywords: ['groupes de cartes', 'mise en page en grille', 'mise en page multicolonnes']
---

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="rocket">
    Configurez votre projet avec notre guide de démarrage rapide.
  </Card>

  <Card title="Référence de l'API" icon="code">
    Explorez les endpoints, paramètres et exemples de votre API.
  </Card>
</Columns>

```mdx 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
</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}>
  <Column>

  **Installation**

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

  </Column>
  <Column>

  **Usage**

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

  </Column>
</Columns>

````mdx 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
</div>

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