> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Colonnes

> Organisez des cartes et d'autres composants dans une grille responsive multicolonnes avec le composant columns, y compris un nombre de colonnes personnalisable.

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 theme={null}
<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 theme={null}
    npm install my-package
    ```
  </Column>

  <Column>
    **Usage**

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

````mdx Column sub-component example theme={null}
<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>