---
title: Colonnes
description: Mise en page en grille responsive pour afficher des cartes, des tuiles et d'autres contenus côte à côte. S'adapte automatiquement à la taille de l'écran.
---

Columns crée une mise en page en grille responsive pour afficher des éléments de contenu côte à côte. La grille s'adapte automatiquement aux écrans plus petits, en empilant sur mobile et en s'élargissant sur desktop.

Les captures d'écran montrent l'interface en anglais.

Utilisez Columns pour afficher du contenu côte à côte dans une grille responsive. Fonctionne avec des cartes, des tuiles, des images et des composants personnalisés.

## Utilisation de base

Afficher le contenu en deux colonnes (par défaut) :

<Columns>
  <Tile href="/fr/components/tabs" title="Tabs" description="Organiser le contenu avec des onglets">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
  <Tile href="/fr/components/tabs" title="Tabs" description="Basculer entre les vues">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
</Columns>

```mdx
<Columns>
  <Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
  <Tile href="/components/tabs" title="Tabs" description="Switch between views">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
</Columns>
```

## Plus de colonnes

Utilisez `cols={3}` ou `cols={4}` pour des mises en page plus denses :

<Columns cols={3}>
  <Tile href="/fr/components/tabs" title="Tabs" description="Organiser le contenu">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
  <Tile href="/fr/components/tabs" title="Tabs" description="Basculer les vues">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
  <Tile href="/fr/components/tabs" title="Tabs" description="Contenu à onglets">
    <img src="/images/tabs-preview.webp" alt="Tabs preview" />
  </Tile>
</Columns>

```mdx
<Columns cols={3}>
  ...
</Columns>
```

## Choisir le nombre de colonnes

| Type de contenu | Colonnes recommandées |
|--------------|---------------------|
| Tuiles avec images | 2-3 |
| Éléments à texte dense | 2 |
| Petites métriques/statistiques | 3-4 |
| Comparaisons d'images | 2 |

## Comportement responsive

Les colonnes s'adaptent automatiquement à la taille de l'écran :
- **Mobile** (< 768px) : 1 colonne
- **Tablette** (768px - 1024px) : 2 colonnes maximum
- **Desktop** (> 1024px) : Nombre de colonnes complet

## Props

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

## Et ensuite ?

<Columns cols={2}>
  <Card title="Vue d'ensemble des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants en MDX
  </Card>
</Columns>