CSS Subgrid

¿Qué es Subgrid?

Subgrid es una funcionalidad avanzada de CSS Grid que permite a los elementos hijos de un grid (subgrid) heredar las líneas de filas y/o columnas de su grid contenedor. Esta característica resuelve problemas comunes de alineación entre componentes anidados y permite un control de layout más coherente y preciso en estructuras complejas.

¿Por qué es importante?

Hasta ahora, los elementos hijos de un grid solo podían comportarse como grid independientes. Esto hacía imposible alinear sus pistas con las del grid padre. Subgrid rompe esa limitación, permitiendo que el alineamiento entre elementos anidados sea preciso y mantenido sin duplicar reglas ni depender de "hacks".

Esto es esencial para componentes repetidos con estructuras internas similares (como tarjetas o cards) que deben mantener alineación perfecta sin importar la cantidad de contenido que tengan.

Subgrid ya es compatible con todos los navegadores modernos

Sintaxis básica

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.child {
  display: grid;
  grid-template-rows: subgrid;
}

• subgrid puede aplicarse a grid-template-rows, grid-template-columns o ambos.
• Solo se puede aplicar a un elemento que ya está en un contexto de grid (es decir, hijo directo de un grid).

¿Qué problema resuelve?

Una vez más, que los descendientes de un contenedor grid tengan acceso a los track (filas y columnas) creados por su ancestro.

Demo

Tienes dos tarjetas con títulos y descripciones. Una tiene más texto que otra. Aunque ambas están en el mismo grid, sus contenidos internos no están alineados.

<div class="grid">
  <div class="card">
    <h2>
      Title A is extremely long and unpredictable. Really, really long BTW
    </h2>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum non
      error recusandae sed eius vitae totam delectus autem dolorem ipsam, sunt
      est cum numquam quia libero pariatur architecto, ab facere!
    </p>
  </div>
  <div class="card">
    <h2>Title B</h2>
    <p>
      <span
        >Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
        soluta deserunt excepturi totam ducimus consequatur necessitatibus
        aliquid, neque voluptatum? Provident quaerat quae rerum, perferendis rem
        possimus aspernatur mollitia in explicabo.</span
      ><span
        >Laborum labore assumenda possimus, molestiae doloremque sint incidunt
        minus aspernatur ea fugiat ipsum voluptas, dicta culpa unde eos quo eius
        optio voluptates corrupti ad nobis consequatur. Quo repudiandae iste
        sunt.</span
      ><span
        >Fugit quidem nam minima corrupti corporis. Impedit debitis quod ullam
        perferendis dignissimos iure eligendi odio aut fugit, cupiditate
        voluptas libero commodi fugiat? Accusamus, ut optio molestias laudantium
        hic libero sunt.</span
      >
    </p>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: auto auto;
  background: #f0f0f0;
}

.card h2 {
  background: lightblue;
}

.card p {
  background: lightgreen;
}

En este caso, aunque ambas .card tengan las mismas definiciones internas, la altura de los elementos no está alineada entre columnas.

Solución con subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  grid-template-rows: auto auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  background: #f0f0f0;
}

Ahora, ambas .card utilizan las mismas líneas de fila que el contenedor, lo que significa que el h2 y el p de ambas estarán perfectamente alineados en el eje vertical.

Otro ejemplo

<div class="grid">
  <article class="item">
    <h2>Article 1 title</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod est qui
      assumenda nemo, vero corrupti. Natus quod ex laborum qui excepturi iusto
      ipsa, recusandae delectus beatae dolore harum quidem repellat.
    </p>
    <a href="#">Click to learn more</a>
  </article>
  <article class="item">
    <h2>Article 2 title, much more extended</h2>

    <p>
      <span
        >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente
        doloribus in alias veritatis similique delectus perferendis ad sunt
        omnis minus! Rem, ab possimus dicta quis nulla sit quia blanditiis
        reiciendis.</span
      ><span
        >Neque optio dignissimos sed nihil perferendis iure et enim facere, quia
        aperiam maxime odit quod sequi. Facere eligendi distinctio reprehenderit
        sequi numquam. Amet eaque iure doloremque illo quod totam vel.</span
      >
    </p>
    <a href="#">Click to learn more</a>
  </article>
  <article class="item">
    <h2>Article 1 title</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum unde
      consequuntur perspiciatis exercitationem rerum facere, doloremque esse
      tempora nesciunt earum molestias et non. Quisquam repellat quasi fugiat
      nisi animi dolor.
    </p>
    <a href="#">Click to learn more</a>
  </article>
</div>

body {
  font-family: sans-serif;
}

h2,
p {
  margin: 0;
}

.grid {
  padding: 1rem;
  max-width: 75vw;
  margin: 0 auto;
  background-color: lightgray;
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 1rem;
}

.item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.item > * {
  margin-bottom: 1rem;
}

Consideraciones importantes

• Solo hijos directos de un grid pueden utilizar subgrid.
• Si el contenedor tiene grid-template-rows, entonces los hijos pueden usar grid-template-rows: subgrid. Lo mismo para columnas.
• subgrid no genera sus propias pistas. Hereda exactamente las del contenedor.

Casos de uso típicos

• Tarjetas o cards repetidas que deben compartir estructura vertical u horizontal.
• Diseños editoriales donde se necesita una alineación estricta entre secciones anidadas.
• Componentes anidados complejos donde no quieres duplicar reglas de layout.

Recursos útiles

• CSS Subgrid by Rachel Andrew
• MDN Web Docs: Subgrid
• Can I use: Subgrid