Subgrid para Conteúdo Aninhado Alinhado

Um desafio comum: você tem uma grade de cartões, cada um com cabeçalho, corpo e rodapé. Sem uma subgrade, os itens de cartões diferentes não podem se alinhar às mesmas linhas de base, porque cada cartão tem seu próprio layout independente.

subgrid é um valor para grid-template-columns ou grid-template-rows que faz uma grade aninhada herdar e participar das definições de trilhas da grade pai.

Um item de grade que também é um contêiner de grade pode usar subgrid para alinhar seus filhos às trilhas da grade pai:

Da mesma forma, usar subgrid nas colunas permite que os itens aninhados se alinhem às trilhas de colunas da grade pai — útil para pares de rótulo e valor alinhados ou campos de formulário distribuídos pelas colunas dos cartões.

Sem subgrid, é possível alinhar parcialmente o conteúdo usando align-content ou alturas fixas, mas isso é frágil. Subgrid permite um alinhamento verdadeiro orientado pelas alturas reais do conteúdo.

Alinhamento de pares de rótulo e campo de entrada em várias colunas de formulário:

Uma subgrid pode abranger várias trilhas pai e herdar trilhas nas duas direções:

Quando uma subgrid herda trilhas nomeadas da grade pai, esses nomes ficam disponíveis para o posicionamento dentro do contêiner da subgrid.

As subgrids herdam os valores de gap da grade pai por padrão. A grade aninhada participa do mesmo sistema de espaçamento.

Subgrid está disponível no Firefox desde 2019. O Chrome adicionou suporte em 2023. Todos os navegadores modernos já oferecem suporte a ele. Verifique o suporte para seu público-alvo antes de usar em produção.

Forneça uma alternativa para navegadores mais antigos usando alturas fixas ou alinhamento com Flexbox antes de adicionar subgrid como aprimoramento:

O que grid-template-rows: subgrid faz quando aplicado a um item de grade?

Subgrid resolve o problema de alinhamento de conteúdo de grades aninhadas, como grades de cartões em que os itens de cartões separados precisam se alinhar à mesma linha de base. Use grid-template-rows: subgrid em itens de grade que abrangem várias linhas e grid-template-columns: subgrid para conteúdo aninhado alinhado por colunas. O suporte dos navegadores modernos agora é universal.