Esta página foi traduzida pela API Cloud Translation.

Subgrade CSS

A grade CSS (link em inglês) é um mecanismo de layout muito eficiente, mas as faixas de linha e coluna criadas em uma grade mãe só podem ser usadas para posicionar filhos diretos do contêiner da grade. As linhas e áreas de grade nomeadas definidas pelo autor foram perdidas em qualquer outro elemento que não seja um filho direto. Com subgrid, o dimensionamento de faixas, modelos e nomes podem ser compartilhados com grades aninhadas. Este artigo explica como isso funciona.

Antes da subgrade, o conteúdo era geralmente personalizado à mão para evitar layouts irregulares como este.

Três cards são mostrados lado a lado, cada um com três partes de conteúdo:
cabeçalho, parágrafo e link. Cada um tem um tamanho de texto diferente, criando alguns
alinhamentos estranhos nos cards à medida que eles ficam lado a lado.

Depois da subgrade, é possível alinhar o conteúdo de tamanho variado.

Três cards são mostrados lado a lado, cada um com três partes de conteúdo:
cabeçalho, parágrafo e link. Cada um tem um comprimento de texto diferente, mas a subgrade
fixou os alinhamentos, permitindo que o mais alto de cada item de conteúdo defina a altura da
linha, corrigindo problemas de alinhamento.

Compatibilidade com navegadores

Origem

Princípios básicos da subgrade

Este é um caso de uso simples que apresenta os conceitos básicos do CSS subgrid. Uma grade é definida com duas colunas nomeadas, a primeira tem largura de 20ch e a segunda é "o resto" do espaço 1fr. Os nomes das colunas não são obrigatórios, mas são ótimos para fins ilustrativos e educacionais.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Em seguida, um filho dessa grade abrange essas duas colunas, é definido como um contêiner de grade e adota as colunas do pai definindo grid-template-columns como subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

Uma captura de tela do DevTools da grade do CSS, mostrando duas colunas lado a lado com um nome no início da linha da coluna. — https://codepen.io/web-dot-dev/pen/NWezjXv

Pronto. As colunas de uma grade mãe foram transmitidas para um nível inferior para uma subgrade. Essa subgrade agora pode atribuir filhos a qualquer uma dessas colunas.

Desafio! Repita a mesma demonstração, mas para grid-template-rows.

Compartilhar uma grade "macro" no nível da página

Os designers costumam trabalhar com grades compartilhadas, desenhando linhas sobre um design inteiro, alinhando qualquer elemento que quiserem. Agora os desenvolvedores da Web também podem! Esse fluxo de trabalho exato agora pode ser alcançado, além de muitos outros.

Da grade macro ao design final. As áreas nomeadas de grade são criadas antecipadamente, e os componentes posteriores são posicionados como desejado.

A implementação do fluxo de trabalho de grade do designer mais comum pode fornecer excelentes insights sobre os recursos, fluxos de trabalho e potenciais do subgrid.

Esta é uma captura de tela tirada do Chrome DevTools de uma grade de macro de layout de página para dispositivos móveis. As linhas têm nomes e há áreas claras para posicionamento de componentes.

Uma
captura de tela do DevTools da grade do CSS do Chrome mostrando um layout de grade dimensionado para dispositivos móveis,
em que as linhas e colunas são nomeadas para identificação rápida: sem margens,
status do sistema, navegação primária, cabeçalho principal, principal, rodapé e gestos do sistema.

O CSS a seguir cria essa grade, com linhas e colunas nomeadas para o layout do dispositivo. Cada linha e coluna tem um tamanho.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

Alguns estilos adicionais têm o design a seguir.

Mesma sobreposição de grade CSS do DevTools, mas dessa vez com parte da
interface do sistema móvel, algumas sombras e um pouco de cor. Ajuda a ver para onde
o design está indo.

Dentro desse pai, há vários elementos aninhados. O design exige uma imagem de largura total nas linhas de navegação e de cabeçalho. Os nomes das linhas da coluna mais à esquerda e à direita são fullbleed-start e fullbleed-end. Nomear linhas de grade dessa maneira permite que os filhos se alinhem a cada um deles simultaneamente com a abreviação de posicionamento de fullbleed. É muito conveniente, como você vai ver em breve.

Uma
captura de tela ampliada da sobreposição de grade do DevTools, com foco específico nos
nomes de coluna fullbleed-start e fullbleed-end.

Com o layout geral do dispositivo criado com linhas e colunas bem nomeadas, use subgrid para transmitir as linhas e colunas bem nomeadas para layouts de grade aninhados. Esse é o momento mágico do subgrid. O layout do dispositivo transmite as linhas e colunas nomeadas ao contêiner do app, que as passa para cada um dos filhos.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

A subgrade do CSS é um valor usado no lugar de uma lista de faixas de grade. As linhas e colunas que o elemento compreende do pai agora são as mesmas linhas e colunas que ele oferece. Isso disponibiliza os nomes de linha da grade .device para filhos de .app, em vez de apenas .app. Os elementos dentro de .app não podiam fazer referência às faixas de grade criadas por .device antes da subgrade.

Com tudo isso definido, a imagem aninhada agora pode ficar sem margens no layout graças à subgrid. Nenhum valor negativo ou truque, mas uma boa descrição que diz "meu layout abrange de fullbleed-start a fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}

O layout de macro finalizado, completo com uma imagem aninhada de largura total, apoiando corretamente as linhas de navegação principal e de cabeçalho e se estendendo para cada uma das linhas de coluna nomeadas sem margens. — https://codepen.io/web-dot-dev/pen/WNLyjzX

Pronto, uma grade macro como os designers usam, implementada em CSS. Esse conceito pode ser escalonado e crescer com você conforme necessário.

Procurar suporte

O aprimoramento progressivo com CSS e subgrade é conhecido e simples. Use @supports e, dentro dos parênteses, pergunte ao navegador se ele entende a subgrade como um valor para colunas ou linhas de modelo. O exemplo a seguir verifica se a propriedade grid-template-columns oferece suporte à palavra-chave subgrid. Se for "true", significa que a subgrade pode ser usada.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Devtools

O Chrome, o Edge, o Firefox e o Safari têm ótimas DevTools de grade CSS, e o Chrome, o Edge e o Firefox têm ferramentas específicas para ajudar com a subgrade. O Chrome anunciou suas ferramentas em 115, enquanto o Firefox já tem essas ferramentas há um ano ou mais.

Captura de tela do selo de subgrade encontrado nos elementos do painel
Elementos.

O selo da subgrade funciona como o selo da grade, mas distingue visualmente quais grades são subgrades e quais não são.

Recursos

Esta lista é uma compilação de artigos de subgrade, demonstrações e inspiração geral para começar. Se você está procurando a próxima etapa da sua educação sobre subgrades, divirta-se explorando todos esses ótimos recursos.