Subgrade CSS

A grade CSS é 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. Todas as áreas e linhas de grade nomeadas definidas por um autor foram perdidas em qualquer outro elemento que não fosse um filho direto. Com o subgrid, o dimensionamento, os modelos e nomes podem ser compartilhados com grades aninhadas. Confira neste artigo como isso funciona.

Antes da subgrade, o conteúdo era adaptado 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, o que cria alguns alinhamentos estranhos nos cards, já que eles se sentem lado a lado.

Após a subgrade, é 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 fixou os alinhamentos, permitindo que o item de conteúdo mais alto defina a altura da linha, corrigindo problemas de alinhamento.

Compatibilidade com navegadores

  • 117
  • 117
  • 71
  • 16

Origem

Princípios básicos da subgrade

Este é um caso de uso simples que introduz os conceitos básicos do CSS subgrid. Uma grade é definida com duas colunas nomeadas, a primeira tem 20ch de largura 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 configurando grid-template-columns como subgrid.

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

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
Captura de tela do DevTools da grade CSS, mostrando duas colunas lado a lado com um nome no início da linha delas.
https://codepen.io/web-dot-dev/pen/NWezjXv

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

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

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

Os designers geralmente trabalham com grades compartilhadas, desenhando linhas em todo o design e alinhando qualquer elemento que quiserem. Agora os desenvolvedores da Web também podem fazer isso. Esse fluxo de trabalho exato agora pode ser alcançado, e muitos outros.

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

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

Veja uma captura de tela do Chrome DevTools de uma grade de macros de layout de página para dispositivos móveis. As linhas têm nomes, e há áreas claras para o posicionamento do componente.

Uma captura de tela da grade CSS do Chrome DevTools mostrando um layout de grade de tamanho 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 primário, principal, rodapé e gestos do sistema.

O CSS abaixo 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 apresentam o design a seguir.

A mesma sobreposição de grade do CSS DevTools de antes, mas desta vez com a interface do sistema móvel, algumas sombras e um pouco de cor. Ajuda a entender para onde o design está indo.

Dentro desse pai, existem 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 de coluna à esquerda e à direita são fullbleed-start e fullbleed-end. Nomear linhas de grade dessa maneira permite que os filhos se alinhem simultaneamente com a abreviação de posicionamento de fullbleed. É muito conveniente, como você verá em breve.

Uma captura de tela com zoom da sobreposição de grade do DevTools, com foco especificamente nos nomes das colunas de início e fim sem margens.

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. Este é aquele momento mágico de subgrid. O layout do dispositivo transmite as linhas e colunas nomeadas para o contêiner do app, que as transmite a cada um dos filhos.

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

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

A subgrade CSS é um valor usado no lugar de uma lista de faixas de grade. As linhas e colunas que o elemento abrange do pai são agora as mesmas linhas e colunas que ele oferece. Isso disponibiliza os nomes das linhas da grade .device para filhos de .app, em vez de apenas .app. Os elementos dentro de .app não conseguiam referenciar as 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 a subgrid. Sem valores negativos ou truques, em vez de um bom texto 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, mantém corretamente as linhas de navegação e cabeçalho principais e se estende a cada uma das linhas de coluna nomeadas sem margens.
https://codepen.io/web-dot-dev/pen/WNLyjzX

Aí está, uma grade de macro como designers usam, implementada em CSS. Esse conceito pode ser escalonado e expandido com você, conforme necessário.

Procurar suporte

O aprimoramento progressivo com CSS e subgrade é familiar 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, que, se verdadeiro, significa que a subgrade pode ser usada

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

Ferramentas de desenvolvedor

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

Captura de tela: prévia do selo de subgrade encontrado nos elementos do 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 de subgrade, demonstrações e inspiração geral para começar. Se estiver procurando o próximo passo para sua educação de subgrade, divirta-se explorando todos esses ótimos recursos!