jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de layout Subgrid CSS

Crea CSS de grid padre y subgrid hijo con alineación compartida de pistas.

Cargando herramienta...

Qué es Generador de layout Subgrid CSS?

Subgrid es una función de CSS Grid donde un contenedor de cuadrícula anidado puede heredar las pistas de cuadrícula de su padre. En lugar de definir sus propios grid-template-columns o grid-template-rows, el hijo usa subgrid para alinear elementos con las líneas de la cuadrícula padre. Esto es útil para cuadrículas de tarjetas donde cada tarjeta necesita alineación interna.

Respuesta rápida

Use CSS subgrid para alinear elementos de cuadrícula anidados con las pistas de su cuadrícula padre. El hijo usa grid-template-columns: subgrid y/o grid-template-rows: subgrid para heredar el dimensionamiento de pistas, espacios y líneas nombradas de la cuadrícula padre.

Last updated: 2026-05-28

Limitaciones

  • Subgrid requiere que el padre sea un contenedor de cuadrícula con pistas explícitas. Si el padre usa pistas generadas automáticamente (cuadrícula implícita), el subgrid no tiene pistas que heredar.
  • El soporte del navegador para subgrid es más reciente que el CSS Grid básico. Firefox lo implementó primero (v71), Chrome y Edge lo agregaron en v117, y Safari lo agregó en v16. Los navegadores más antiguos ignoran subgrid por completo.
  • El hijo subgrid no puede anular el espacio del padre. Los valores de gap se heredan del ancestro de cuadrícula más cercano y no se pueden cambiar en el propio elemento subgrid.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Defina las columnas y opcionalmente las filas de la cuadrícula padre. El hijo subgrid hereda estas pistas.
  2. Establezca el espacio de columna y fila para el hijo subgrid — cuántas celdas de la cuadrícula padre ocupa.
  3. Elija si el hijo usa subgrid para columnas, filas o ambas.
  4. Copie el CSS padre e hijo y aplique selectores coincidentes en su HTML.

Para qué puedes usarla

  • Crear una cuadrícula de tarjetas donde cada tarjeta tenga encabezado, cuerpo y pie de página que se alineen entre columnas.
  • Construir un diseño de formulario donde los pares etiqueta-entrada se alineen entre secciones usando subgrid.
  • Diseñar un panel de control donde widgets de diferentes tamaños compartan alineación con la cuadrícula principal.

Casos de uso

Ejemplos prácticos

Ejemplo

Cuadrícula de tarjetas con contenido alineado

Una cuadrícula de productos tiene tres columnas. Cada tarjeta ocupa una columna y usa subgrid para filas, de modo que el título, la descripción y el precio se alineen horizontalmente entre tarjetas independientemente de la longitud del contenido.

Ejemplo

Diseño de formulario de múltiples secciones

Un formulario tiene dos secciones que comparten alineación de columnas. Cada sección es un hijo subgrid que hereda las pistas de columna etiqueta-entrada, garantizando una alineación consistente sin repetir definiciones de cuadrícula.

Errores comunes

  • Usar subgrid sin una cuadrícula padre — subgrid debe descender de un contenedor de cuadrícula con pistas explícitas.
  • Establecer tanto grid-template-columns: subgrid como valores de columna explícitos — subgrid reemplaza, no complementa, las pistas del padre.
  • Olvidar que subgrid hereda los espacios del padre — si el padre tiene gap: 16px, el hijo subgrid también usa espacios de 16px por defecto.

Verificación

  1. Revise el diseño en el inspector de cuadrícula de las herramientas de desarrollo del navegador — las pistas de subgrid deben alinearse visualmente con las pistas de la cuadrícula padre.
  2. Pruebe en Firefox y Chrome para confirmar el comportamiento de subgrid entre navegadores, ya que existen diferencias sutiles en el manejo de pistas implícitas.

FAQ

Preguntas sobre Generador de layout Subgrid CSS

Cuál es la diferencia entre subgrid y cuadrículas anidadas?

Una cuadrícula anidada crea pistas independientes dentro de un elemento hijo — no comparte alineación con la cuadrícula padre. Subgrid hereda las pistas de la cuadrícula padre, por lo que los elementos en el subgrid se alinean con los elementos de la cuadrícula padre como si estuvieran todos en una cuadrícula plana. Esto permite la alineación de pistas entre elementos.

Subgrid hereda las líneas de cuadrícula nombradas del padre?

Sí. Las líneas de cuadrícula nombradas definidas en grid-template-columns o grid-template-rows del padre están disponibles en el subgrid. Esto facilita colocar elementos del subgrid en líneas nombradas que abarcan todo el diseño.

Qué navegadores admiten subgrid?

Chrome 117+, Edge 117+, Firefox 71+ y Safari 16+. Firefox fue el primero en implementar subgrid. Es seguro usarlo como mejora progresiva — los navegadores que no admiten subgrid retroceden al comportamiento de cuadrícula regular definido en el elemento hijo.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también