Grilla

La grilla reparte el ancho en 12 columnas. Cada .row es una fila con flexbox y cada hijo es una columna. Las columnas se separan con gap, sin márgenes negativos: el ancho de column-N ya descuenta su parte de la separación. Sin clase de columna, un hijo de .row ocupa el ancho completo.

Columnas

column-N ocupa N de las 12 partes. Si la suma pasa de 12, las columnas que sobran bajan a la línea siguiente.

Tema

HTML
React

<div class="row">
  <div class="column-4">column-4</div>
  <div class="column-4">column-4</div>
  <div class="column-4">column-4</div>
</div>
<div class="row">
  <div class="column-8">column-8</div>
  <div class="column-4">column-4</div>
</div>
<div class="row">
  <div class="column-3">column-3</div>
  <div class="column-6">column-6</div>
  <div class="column-3">column-3</div>
</div>

export default function GrillaColumnas() {
  return (
    <>
      <div className="row">
        <div className="column-4">column-4</div>
        <div className="column-4">column-4</div>
        <div className="column-4">column-4</div>
      </div>
      <div className="row">
        <div className="column-8">column-8</div>
        <div className="column-4">column-4</div>
      </div>
      <div className="row">
        <div className="column-3">column-3</div>
        <div className="column-6">column-6</div>
        <div className="column-3">column-3</div>
      </div>
    </>
  );
}

Responsivas

column-{breakpoint}-N aplica el ancho desde ese breakpoint. Por debajo, la columna ocupa el ancho completo, así que column-12 es opcional. Prueba los anchos Móvil, Completo y Escritorio.

Tema

HTML
React

<div class="row">
  <div class="column-sm-6 column-lg-3">Diseño web</div>
  <div class="column-sm-6 column-lg-3">Hosting</div>
  <div class="column-sm-6 column-lg-3">Marketing</div>
  <div class="column-sm-6 column-lg-3">Soporte</div>
</div>

export default function GrillaResponsiva() {
  return (
    <div className="row">
      <div className="column-sm-6 column-lg-3">Diseño web</div>
      <div className="column-sm-6 column-lg-3">Hosting</div>
      <div className="column-sm-6 column-lg-3">Marketing</div>
      <div className="column-sm-6 column-lg-3">Soporte</div>
    </div>
  );
}

Breakpoint	Clase	Desde
—	`column-6`	0
`sm`	`column-sm-6`	576 px
`md`	`column-md-6`	768 px
`lg`	`column-lg-6`	992 px
`xl`	`column-xl-6`	1200 px
`xxl`	`column-xxl-6`	1408 px

Los breakpoints son fijos: las media queries no aceptan variables CSS.

Automáticas

column reparte el espacio libre en partes iguales y column-auto toma el ancho de su contenido. También tienen versión por breakpoint: con column-md, las columnas van una bajo otra en móvil y en partes iguales desde md.

Tema

HTML
React

<div class="row">
  <div class="column">column</div>
  <div class="column">column</div>
  <div class="column">column</div>
</div>
<div class="row">
  <div class="column-auto">column-auto</div>
  <div class="column">column</div>
  <div class="column-auto">column-auto</div>
</div>

export default function GrillaAutomaticas() {
  return (
    <>
      <div className="row">
        <div className="column">column</div>
        <div className="column">column</div>
        <div className="column">column</div>
      </div>
      <div className="row">
        <div className="column-auto">column-auto</div>
        <div className="column">column</div>
        <div className="column-auto">column-auto</div>
      </div>
    </>
  );
}

Separación

Por defecto, 32 px entre columnas y 16 px entre líneas. Dos filas seguidas se separan igual que las líneas de una misma fila. row--gapless quita la separación.

Tema

HTML
React

<div class="row row--gapless">
  <div class="column-6">column-6</div>
  <div class="column-6">column-6</div>
  <div class="column-6">column-6</div>
  <div class="column-6">column-6</div>
</div>

export default function GrillaSinSeparacion() {
  return (
    <div className="row row--gapless">
      <div className="column-6">column-6</div>
      <div className="column-6">column-6</div>
      <div className="column-6">column-6</div>
      <div className="column-6">column-6</div>
    </div>
  );
}

Para otra separación, cambia --ds-row-gap-x y --ds-row-gap-y en la fila (o en tu propia clase).

Tema

HTML
React

<div class="row" style="--ds-row-gap-x: 0.75rem; --ds-row-gap-y: 0.75rem">
  <div class="column-4">column-4</div>
  <div class="column-4">column-4</div>
  <div class="column-4">column-4</div>
  <div class="column-4">column-4</div>
  <div class="column-4">column-4</div>
  <div class="column-4">column-4</div>
</div>

export default function GrillaSeparacionPropia() {
  return (
    <div className="row" style={{ '--ds-row-gap-x': '0.75rem', '--ds-row-gap-y': '0.75rem' }}>
      <div className="column-4">column-4</div>
      <div className="column-4">column-4</div>
      <div className="column-4">column-4</div>
      <div className="column-4">column-4</div>
      <div className="column-4">column-4</div>
      <div className="column-4">column-4</div>
    </div>
  );
}

Alineación

row--justify-* alinea las columnas en horizontal (útil cuando no suman 12) y row--align-*, en vertical. Por defecto, todas las columnas de una línea tienen el mismo alto.

Tema

HTML
React

<div class="row row--justify-center">
  <div class="column-4">column-4</div>
  <div class="column-4">column-4</div>
</div>
<div class="row row--align-center">
  <div class="column-4">Una columna con más texto, que ocupa varias líneas.</div>
  <div class="column-4">Centrada</div>
  <div class="column-4">Centrada</div>
</div>

export default function GrillaAlineacion() {
  return (
    <>
      <div className="row row--justify-center">
        <div className="column-4">column-4</div>
        <div className="column-4">column-4</div>
      </div>
      <div className="row row--align-center">
        <div className="column-4">Una columna con más texto, que ocupa varias líneas.</div>
        <div className="column-4">Centrada</div>
        <div className="column-4">Centrada</div>
      </div>
    </>
  );
}

Orden

order-* cambia el orden visual: order-first, order-0 a order-5 y order-last, también por breakpoint. Por ejemplo, una imagen que va primero en móvil y a la derecha en escritorio.

Tema

HTML
React

<div class="row">
  <div class="column-sm-6 order-sm-last">Imagen: primera en móvil, a la derecha desde sm</div>
  <div class="column-sm-6">Texto</div>
</div>

export default function GrillaOrden() {
  return (
    <div className="row">
      <div className="column-sm-6 order-sm-last">Imagen: primera en móvil, a la derecha desde sm</div>
      <div className="column-sm-6">Texto</div>
    </div>
  );
}

Anidadas

Una columna puede tener su propia .row, con otras 12 partes.

Tema

HTML
React

<div class="row">
  <div class="column-sm-8">
    <p>column-sm-8</p>
    <div class="row">
      <div class="column-6">column-6</div>
      <div class="column-6">column-6</div>
    </div>
  </div>
  <div class="column-sm-4">column-sm-4</div>
</div>

export default function GrillaAnidada() {
  return (
    <div className="row">
      <div className="column-sm-8">
        <p>column-sm-8</p>
        <div className="row">
          <div className="column-6">column-6</div>
          <div className="column-6">column-6</div>
        </div>
      </div>
      <div className="column-sm-4">column-sm-4</div>
    </div>
  );
}

Accesibilidad

order-* solo cambia el orden visual. Los lectores de pantalla y la tecla Tab siguen el orden del HTML, así que escríbelo en el orden lógico de lectura.
La grilla no agrega semántica: si una columna es una sección o un artículo, usa <section> o <article> con la clase de columna.

Clases

Clase	Uso
`row`	Fila. Cada hijo es una columna.
`column-{1…12}`	Ancho en partes de 12.
`column-{bp}-{1…12}`	Ancho desde un breakpoint (`sm`, `md`, `lg`, `xl`, `xxl`).
`column`, `column-{bp}`	Partes iguales del espacio libre.
`column-auto`, `column-{bp}-auto`	Ancho de su contenido.
`order-first`, `order-{0…5}`, `order-last`	Orden visual. Por breakpoint: `order-{bp}-*`.
`row--gapless`	Sin separación.
`row--justify-center`, `--justify-end`, `--justify-between`	Alineación horizontal.
`row--align-start`, `--align-center`, `--align-end`	Alineación vertical.

Variables

Variable	Valor por defecto	Uso
`--ds-row-gap-x`	`var(--ds-space-6)`	Espacio horizontal entre columnas.
`--ds-row-gap-y`	`var(--ds-space-4)`	Espacio vertical entre columnas que bajan de línea y entre filas seguidas.
`--ds-row-align`	`stretch`	Alineación vertical de las columnas (align-items).
`--ds-row-justify`	`flex-start`	Alineación horizontal de las columnas (justify-content).