BaselineLab
0Apoyar

Playground de CSS Grid Lanes

Crea layouts tipo masonry con CSS nativo: cambia entre waterfall y brick, combina patrones de lanes, controla la tolerancia del flujo y prueba una mejora progresiva en navegadores sin soporte.

Preguntar a la IA

Playground de CSS Grid Lanes

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.

Este navegador no admite CSS Grid Lanes. La vista previa muestra el fallback progresivo.

Resultado mostrado

  • Patrón

    Ritmo visual

    Una tarjeta breve abre la composición.

  • CSS

    Sin JavaScript

    Los elementos se reparten entre lanes y se acercan al inicio del contenedor de forma nativa.

  • Layout

    Tracks flexibles

    Combina repeat(), minmax() y unidades fr.

  • Orden

    El DOM permanece intacto

    La lectura y el foco siguen el orden de origen aunque cambie la colocación visual.

  • Detalle

    Tolerancia

    flow-tolerance decide cuándo dos posiciones se consideran equivalentes.

  • Responsive

    Sin media queries

    auto-fit puede añadir o retirar lanes según el espacio disponible.

  • Ejes

    Waterfall o brick

    Define columnas o filas para cambiar la dirección.

  • Contenido

    Alturas distintas

    Textos, imágenes y componentes pueden conservar su tamaño intrínseco.

  • Grid

    Spans y colocación

    Cada ítem puede ocupar varias lanes o empezar en una línea concreta.

Usa Tab para comprobar que el foco conserva el orden del DOM aunque cambie la colocación visual.

HTML
<ul class="lanes">
  <li id="lane-1" class="lane-card">
    <article>
      <p class="eyebrow">Patrón</p>
      <h2>Ritmo visual</h2>
      <p>Una tarjeta breve abre la composición.</p>
      <a href="#lane-1" aria-label="Abrir tarjeta: Ritmo visual">01</a>
    </article>
  </li>
  <li id="lane-2" class="lane-card">
    <article>
      <p class="eyebrow">CSS</p>
      <h2>Sin JavaScript</h2>
      <p>Los elementos se reparten entre lanes y se acercan al inicio del contenedor de forma nativa.</p>
      <a href="#lane-2" aria-label="Abrir tarjeta: Sin JavaScript">02</a>
    </article>
  </li>
  <li id="lane-3" class="lane-card">
    <article>
      <p class="eyebrow">Layout</p>
      <h2>Tracks flexibles</h2>
      <p>Combina repeat(), minmax() y unidades fr.</p>
      <a href="#lane-3" aria-label="Abrir tarjeta: Tracks flexibles">03</a>
    </article>
  </li>
  <li id="lane-4" class="lane-card">
    <article>
      <p class="eyebrow">Orden</p>
      <h2>El DOM permanece intacto</h2>
      <p>La lectura y el foco siguen el orden de origen aunque cambie la colocación visual.</p>
      <a href="#lane-4" aria-label="Abrir tarjeta: El DOM permanece intacto">04</a>
    </article>
  </li>
  <li id="lane-5" class="lane-card">
    <article>
      <p class="eyebrow">Detalle</p>
      <h2>Tolerancia</h2>
      <p>flow-tolerance decide cuándo dos posiciones se consideran equivalentes.</p>
      <a href="#lane-5" aria-label="Abrir tarjeta: Tolerancia">05</a>
    </article>
  </li>
  <li id="lane-6" class="lane-card">
    <article>
      <p class="eyebrow">Responsive</p>
      <h2>Sin media queries</h2>
      <p>auto-fit puede añadir o retirar lanes según el espacio disponible.</p>
      <a href="#lane-6" aria-label="Abrir tarjeta: Sin media queries">06</a>
    </article>
  </li>
  <li id="lane-7" class="lane-card">
    <article>
      <p class="eyebrow">Ejes</p>
      <h2>Waterfall o brick</h2>
      <p>Define columnas o filas para cambiar la dirección.</p>
      <a href="#lane-7" aria-label="Abrir tarjeta: Waterfall o brick">07</a>
    </article>
  </li>
  <li id="lane-8" class="lane-card">
    <article>
      <p class="eyebrow">Contenido</p>
      <h2>Alturas distintas</h2>
      <p>Textos, imágenes y componentes pueden conservar su tamaño intrínseco.</p>
      <a href="#lane-8" aria-label="Abrir tarjeta: Alturas distintas">08</a>
    </article>
  </li>
  <li id="lane-9" class="lane-card">
    <article>
      <p class="eyebrow">Grid</p>
      <h2>Spans y colocación</h2>
      <p>Cada ítem puede ocupar varias lanes o empezar en una línea concreta.</p>
      <a href="#lane-9" aria-label="Abrir tarjeta: Spans y colocación">09</a>
    </article>
  </li>
</ul>
Tailwind CSS
Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.
<ul class="columns-4 [column-gap:16px] supports-[display:grid-lanes]:columns-auto supports-[display:grid-lanes]:[display:grid-lanes] supports-[display:grid-lanes]:[grid-template-columns:repeat(auto-fit,_minmax(min(12rem,_100%),_1fr))] supports-[display:grid-lanes]:gap-y-[16px] supports-[display:grid-lanes]:gap-x-[16px]">
  <li id="lane-1" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">Patrón</p>
      <h2>Ritmo visual</h2>
      <p>Una tarjeta breve abre la composición.</p>
      <a href="#lane-1" aria-label="Abrir tarjeta: Ritmo visual">01</a>
    </article>
  </li>
  <li id="lane-2" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">CSS</p>
      <h2>Sin JavaScript</h2>
      <p>Los elementos se reparten entre lanes y se acercan al inicio del contenedor de forma nativa.</p>
      <a href="#lane-2" aria-label="Abrir tarjeta: Sin JavaScript">02</a>
    </article>
  </li>
  <li id="lane-3" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">Layout</p>
      <h2>Tracks flexibles</h2>
      <p>Combina repeat(), minmax() y unidades fr.</p>
      <a href="#lane-3" aria-label="Abrir tarjeta: Tracks flexibles">03</a>
    </article>
  </li>
  <li id="lane-4" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">Orden</p>
      <h2>El DOM permanece intacto</h2>
      <p>La lectura y el foco siguen el orden de origen aunque cambie la colocación visual.</p>
      <a href="#lane-4" aria-label="Abrir tarjeta: El DOM permanece intacto">04</a>
    </article>
  </li>
  <li id="lane-5" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">Detalle</p>
      <h2>Tolerancia</h2>
      <p>flow-tolerance decide cuándo dos posiciones se consideran equivalentes.</p>
      <a href="#lane-5" aria-label="Abrir tarjeta: Tolerancia">05</a>
    </article>
  </li>
  <li id="lane-6" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">Responsive</p>
      <h2>Sin media queries</h2>
      <p>auto-fit puede añadir o retirar lanes según el espacio disponible.</p>
      <a href="#lane-6" aria-label="Abrir tarjeta: Sin media queries">06</a>
    </article>
  </li>
  <li id="lane-7" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">Ejes</p>
      <h2>Waterfall o brick</h2>
      <p>Define columnas o filas para cambiar la dirección.</p>
      <a href="#lane-7" aria-label="Abrir tarjeta: Waterfall o brick">07</a>
    </article>
  </li>
  <li id="lane-8" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">Contenido</p>
      <h2>Alturas distintas</h2>
      <p>Textos, imágenes y componentes pueden conservar su tamaño intrínseco.</p>
      <a href="#lane-8" aria-label="Abrir tarjeta: Alturas distintas">08</a>
    </article>
  </li>
  <li id="lane-9" class="inline-block w-full align-top mb-[16px] supports-[display:grid-lanes]:block supports-[display:grid-lanes]:mb-0 break-inside-avoid rounded-2xl border border-slate-300 bg-slate-50 p-4 text-slate-900">
    <article>
      <p class="eyebrow">Grid</p>
      <h2>Spans y colocación</h2>
      <p>Cada ítem puede ocupar varias lanes o empezar en una línea concreta.</p>
      <a href="#lane-9" aria-label="Abrir tarjeta: Spans y colocación">09</a>
    </article>
  </li>
</ul>
CSS
@supports (display: grid-lanes) {
  .lanes {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 16px;
  }
}

.lanes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lane-card {
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 1rem;
  background: #f8fafc;
  color: #0f172a;
}

@supports not (display: grid-lanes) {
  .lanes {
    columns: 4;
    column-gap: 16px;
  }

  .lane-card {
    display: inline-block;
    inline-size: 100%;
    break-inside: avoid;
    margin-block-end: 16px;
    vertical-align: top;
  }
}