Configura la rejilla principal y el elemento anidado para obtener el código CSS optimizado.
En el desarrollo web moderno, mantener la alineación visual entre componentes independientes suele ser un desafío. Con la llegada de CSS Subgrid, hemos obtenido una herramienta clave que permite a los elementos anidados heredar la estructura de cuadrícula de su contenedor padre.
Nosotros hemos diseñado este generador para que puedas experimentar en tiempo real con las propiedades de cuadrícula. Configura el número total de columnas del elemento contenedor y especifica el rango que abarcará el subgrid. El gráfico generado te ayuda a visualizar cómo las pistas del contenedor alimentan al elemento secundario.
CSS Subgrid es una característica de CSS Grid Level 2 que permite que los elementos anidados (hijos de un contenedor grid) adopten la definición de filas o columnas de su elemento padre, alineándose perfectamente con la rejilla principal.
Actualmente, CSS Subgrid cuenta con un soporte excelente y moderno en la mayoría de navegadores principales, incluyendo Chrome, Edge, Firefox y Safari en sus versiones recientes.
La herramienta calcula automáticamente las propiedades de cuadrícula del elemento padre (display: grid, grid-template-columns) y aplica grid-template-columns: subgrid junto con la ubicación de columna adecuada para la tarjeta o elemento anidado.