---
title: Colonne
description: Layout a griglia reattivo per mostrare Card, Tile e altri contenuti affiancati, adattandosi automaticamente alle dimensioni dello schermo.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Columns crea un layout a griglia reattivo per mostrare gli elementi di contenuto affiancati. La griglia si adatta automaticamente agli schermi più piccoli, disponendo gli elementi in pila sui dispositivi mobili ed espandendosi su desktop.

Gli screenshot mostrano l'interfaccia in inglese.

Funziona con Card, Tile, immagini e componenti personalizzati.

## Utilizzo di base

Mostra i contenuti in due colonne (impostazione predefinita):

<Columns>
  <Tile href="/it/components/tabs" title="Tabs" description="Organizza i contenuti con le schede">
    <img src="/images/tabs-preview.webp" alt="Anteprima di Tabs" />
  </Tile>
  <Tile href="/it/components/tabs" title="Tabs" description="Passa da una vista all'altra">
    <img src="/images/tabs-preview.webp" alt="Anteprima di Tabs" />
  </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>
```

## Più colonne

Usa `cols={3}` o `cols={4}` per layout più densi:

<Columns cols={3}>
  <Tile href="/it/components/tabs" title="Tabs" description="Organizza i contenuti">
    <img src="/images/tabs-preview.webp" alt="Anteprima di Tabs" />
  </Tile>
  <Tile href="/it/components/tabs" title="Tabs" description="Cambia vista">
    <img src="/images/tabs-preview.webp" alt="Anteprima di Tabs" />
  </Tile>
  <Tile href="/it/components/tabs" title="Tabs" description="Contenuti organizzati in schede">
    <img src="/images/tabs-preview.webp" alt="Anteprima di Tabs" />
  </Tile>
</Columns>

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

## Scelta del numero di colonne

| Tipo di contenuto | Colonne consigliate |
|-------------------|---------------------|
| Tile con immagini | 2-3 |
| Elementi con molto testo | 2 |
| Metriche/statistiche ridotte | 3-4 |
| Confronti tra immagini | 2 |

## Comportamento reattivo

Columns si adatta automaticamente alle dimensioni dello schermo:
- **Dispositivo mobile** (< 768px): 1 colonna
- **Tablet** (768px - 1024px): massimo 2 colonne
- **Desktop** (> 1024px): numero completo di colonne

## Props

<ParamField name="cols" type="number" default="2">
  Numero di colonne per riga. Accetta valori da 1 a 4.
</ParamField>

## Cosa fare dopo?

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>