Subgrid
Subgrade
Um subgrade é uma grade dentro de outra grade que compartilha os tamanhos de linha ou coluna do pai. Pode compartilhar em uma direção ou em ambas.
Outro exemplo
Três cartões de preços estão em uma grade principal. Cada cartão usa `grid-template-rows: subgrid`. Nomes dos planos, preços, recursos e botões de CTA ficam alinhados mesmo quando os comprimentos do texto diferem. Em uma tela estreita, o pai muda para uma coluna e o layout ainda faz sentido.
Partes principais
- 01Trilhas do pai
- 02eixo da subgrade
- 03Descendentes alinhados
Use-o quando
Use-o quando o conteúdo dentro de componentes aninhados precisa se alinhar com as trilhas pai compartilhadas sem copiar as regras da trilha.
Não o use quando
Não use subgrade apenas porque uma grade está aninhada. Uma grade filha separada é mais simples quando os itens não precisam se alinhar entre os cartões.
Nome usado no código
grid-template-columns: subgrid and/or grid-template-rows: subgrid Antes de lançar
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 Subgrade (Subgrid). User context: Três cartões de preços estão em uma grade principal. Cada cartão usa `grid-template-rows: subgrid`. Nomes dos planos, preços, recursos e botões de CTA ficam alinhados mesmo quando os comprimentos do texto diferem. Em uma tela estreita, o pai muda para uma coluna e o layout ainda faz sentido. Design concept to apply: Subgrade (Subgrid). Why it fits: Use-o quando o conteúdo dentro de componentes aninhados precisa se alinhar com as trilhas pai compartilhadas sem copiar as regras da trilha. Do not use it when: Não use subgrade apenas porque uma grade está aninhada. Uma grade filha separada é mais simples quando os itens não precisam se alinhar entre os cartões. 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): Um documento formal ainda pode ser rascunho, release candidate ou versão final. Cheque o status e o suporte no navegador ou plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Conferir este pedido
Review how Subgrade (Subgrid) is used now. Definition: Um subgrade é uma grade dentro de outra grade que compartilha os tamanhos de linha ou coluna do pai. Pode compartilhar em uma direção ou em 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.