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 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. Veja 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 quando eles se sentam 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 mais alto de cada item de conteúdo defina a altura da linha, corrigindo problemas de alinhamento.

Compatibilidade com navegadores

  • 117
  • 117
  • 71
  • 16

Origem

Noções básicas da subpropriedade

Confira 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 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 dela, definindo 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 da coluna.
https://codepen.io/web-dot-dev/pen/NWezjXv

É isso, as colunas de uma grade mãe foram efetivamente transmitidas 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 já 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 colocados 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 do subgrid.

Esta é uma captura de tela tirada 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 livres para a colocação do componente.

Uma captura de tela do DevTools da grade CSS do Chrome mostrando um layout de grade com 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 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 seguinte design.

A mesma sobreposição de grade do CSS DevTools de antes, mas dessa vez com um pouco 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, existem vários elementos aninhados. O design exige uma imagem de largura total nas linhas de navegação e cabeçalho. Os nomes das linhas da 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 posição de fullbleed. Ele é muito prático, 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 é 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 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 ser sangrada no layout graças ao método subgrid. Nada de valores negativos nem truques, em vez disso, um bom texto que diz "meu layout abrange de fullbleed-start a fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}
O layout de macro final, completo com uma imagem aninhada de largura total, aparece corretamente após as linhas de cabeçalho e navegação primárias e se estende para cada uma das linhas de coluna nomeadas sem margens.
https://codepen.io/web-dot-dev/pen/WNLyjzX

Aí está, uma macro grade como a utilizada por designers, implementada no CSS. Esse conceito pode ser escalonado e crescer com você, conforme necessário.

Procurar suporte

O aprimoramento progressivo com CSS e a subgrade é familiar e direto. Use @supports e, dentro dos parênteses, pergunte ao navegador se ele entende a subgrade como um valor para colunas ou linhas do modelo. O exemplo a seguir verifica se a propriedade grid-template-columns é compatível com a palavra-chave subgrid, que, se verdadeiro, significa que a subgrade pode ser usada.

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

Ferramentas para desenvolvedores

O Chrome, o Edge, o Firefox e o Safari têm um ótimo 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 as ferramentas no 115, enquanto o Firefox tem um ano ou mais delas.

Captura de tela da 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 você está procurando o próximo passo para o ensino da subgrade, divirta-se explorando todos esses ótimos recursos.

Parte da série Newly interoperável