Subgrid
Subcuadrícula
Una subrejilla es una cuadrícula dentro de otra cuadrícula que comparte los tamaños de fila o columna de su elemento superior. Puede compartir una dirección o ambas.
Otro ejemplo
Tres tarjetas de precios se sitúan en una cuadrícula principal. Cada tarjeta usa `grid-template-rows: subgrid`. Los nombres de los planes, precios, características y botones de CTA se alinean incluso cuando la longitud del texto difiere. En una pantalla estrecha, la cuadrícula principal cambia a una columna y el diseño aún tiene sentido.
Partes principales
- 01Pistas principales
- 02eje de subcuadrícula
- 03Descendientes alineados
Úsalo cuando
Úsalo cuando el contenido dentro de componentes anidados deba alinearse con pistas compartidas del padre sin copiar las reglas de la pista.
No lo uses cuando
No use subrejillas solo porque una cuadrícula esté anidada. Una cuadrícula hija separada es más simple cuando los elementos no necesitan alinearse entre tarjetas.
Nombre usado en código
grid-template-columns: subgrid and/or grid-template-rows: subgrid Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Subcuadrícula (Subgrid). User context: Tres tarjetas de precios se sitúan en una cuadrícula principal. Cada tarjeta usa `grid-template-rows: subgrid`. Los nombres de los planes, precios, características y botones de CTA se alinean incluso cuando la longitud del texto difiere. En una pantalla estrecha, la cuadrícula principal cambia a una columna y el diseño aún tiene sentido. Design concept to apply: Subcuadrícula (Subgrid). Why it fits: Úsalo cuando el contenido dentro de componentes anidados deba alinearse con pistas compartidas del padre sin copiar las reglas de la pista. Do not use it when: No use subrejillas solo porque una cuadrícula esté anidada. Una cuadrícula hija separada es más simple cuando los elementos no necesitan alinearse entre tarjetas. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Subcuadrícula (Subgrid) is used now. Definition: Una subrejilla es una cuadrícula dentro de otra cuadrícula que comparte los tamaños de fila o columna de su elemento superior. Puede compartir una dirección o ambas. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.