# Columnas (/es/components/columns)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 1066 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md)

El componente `Columns` te permite organizar contenido en un diseño de cuadrícula adaptable. Se usa con más frecuencia para colocar tarjetas en una cuadrícula, especificando el número de columnas de la cuadrícula. También puedes usar el subcomponente `Column` para envolver contenido arbitrario. Las columnas son adaptables y se ajustan automáticamente en pantallas más pequeñas.

<Columns cols="2">
  <Card title="Primeros pasos" 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>">
    Configura tu proyecto con nuestra guía de inicio rápido.
  </Card>

  <Card title="Referencia de la 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>">
    Explora endpoints, parámetros y ejemplos de tu API.
  </Card>
</Columns>

```mdx title="Columns example"
<Columns cols={2}>
  <Card title="Primeros pasos">
    Configura tu proyecto con nuestra guía de inicio rápido.
  </Card>
  <Card title="Referencia de la API">
    Explora endpoints, parámetros y ejemplos de tu API.
  </Card>
</Columns>
```

<div id="column-sub-component">
  ## Subcomponente Column [#subcomponente-column]
</div>

Usa el componente `Column` para envolver texto o código en columnas individuales. Esto es útil cuando deseas mostrar contenido arbitrario lado a lado, no solo tarjetas u otros componentes.

<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">
  ## Propiedades [#propiedades]
</div>

<ResponseField name="cols" type="number" default="2">
  El número de columnas por fila. Acepta valores de 1 a 4.
</ResponseField>