Esta página foi traduzida pela API Cloud Translation.

Subgrade CSS

Publicado em 28 de setembro de 2023

A grade CSS é um mecanismo de layout muito eficiente, mas as faixas de linha e coluna criadas em uma grade pai só podem ser usadas para posicionar filhos diretos do contêiner de 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 tamanho da faixa, os modelos e os nomes podem ser compartilhados com grades aninhadas. Este artigo explica como ele funciona.

Antes da subgrade, o conteúdo era personalizado manualmente 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 comprimento de texto diferente, criando alguns
alinhamentos estranhos nos cards, já que eles ficam um ao lado do outro.

Na subgrade After, é possível alinhar o conteúdo de tamanho variável.

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
corrigiu os alinhamentos permitindo que o item de conteúdo mais alto de cada um deles defina a altura
da linha, corrigindo todos os problemas de alinhamento.

Browser Support

Source

Noções básicas sobre subgrades

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 20ch de largura e a segunda é "o restante" 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, uma criança dessa grade, que abrange essas duas colunas, é definida como um contêiner de grade e adota as colunas da mãe definindo grid-template-columns como subgrid.

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

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

Uma captura de tela das DevTools da grade 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. Agora, essa subgrade 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 da grade são criadas antecipadamente e os componentes posteriores são colocados conforme desejado.

A implementação do fluxo de trabalho de grade de designer mais comum pode fornecer excelentes insights sobre os recursos, fluxos de trabalho e potenciais de 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 a colocação de componentes.

Uma
captura de tela das DevTools da grade CSS do Chrome mostrando um layout de grade para dispositivos móveis
em que as linhas e colunas são nomeadas para identificação rápida: fullbleed,
status do sistema, navegação principal, 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 geram 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 saber para onde o
design está indo.

Dentro desse elemento pai, há vários elementos aninhados. O design exige uma imagem de largura completa abaixo das linhas de navegação e do cabeçalho. Os nomes das linhas da coluna mais à esquerda e à direita são fullbleed-start e fullbleed-end. Nomear linhas de grade dessa forma permite que as filhas se alinhem simultaneamente com a abreviatura de posicionamento de fullbleed. É muito conveniente, como você vai ver em breve.

Uma
captura de tela ampliada da sobreposição de grade das Ferramentas do desenvolvedor, com foco específico nos
nomes das colunas "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 para o contêiner do app, que as transmite para cada um dos elementos 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 está abrangendo 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 definido, a imagem aninhada agora pode ser exibida em todo o layout graças a subgrid. Não há valores negativos ou truques. Em vez disso, uma linha única que diz "Meu layout se estende de fullbleed-start a fullbleed-end".

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

O layout macro final, completo com uma imagem aninhada de largura total, posicionado corretamente abaixo das linhas de navegação e de cabeçalho principais e estendendo-se a cada uma das linhas de coluna nomeadas de fullbleed. — 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 verdadeiro, 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 ferramentas de DevTools para grade CSS, e o Chrome, o Edge e o Firefox têm ferramentas específicas para ajudar com a subgrade. O Chrome anunciou as ferramentas em 115, enquanto o Firefox as tem há um ano ou mais.

Captura de tela da visualização do selo da subgrade encontrado em elementos no painel
"Elementos".

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

Recursos

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