Esta página foi traduzida pela API Cloud Translation.

Subgrade CSS

A grade CSS é um mecanismo de layout muito eficiente, mas a linha e as faixas de coluna criadas em uma grade principal só podem ser usadas para posicionar filhos do contêiner da grade. Qualquer autor definiu áreas de grade nomeadas e linhas foram perdidas em qualquer outro elemento que não um filho direto. Com o subgrid, é possível compartilhar modelos, nomes e tamanhos de faixas 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 a 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, o que cria
alinhamentos estranhos nos cards
quando 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 uma tem um tamanho de texto diferente, mas a subgrade tem
corrigiu os alinhamentos, permitindo que o mais alto de cada item de conteúdo defina a linha
a altura, corrigindo problemas de alinhamento.

Compatibilidade com navegadores

Origem

Noções básicas sobre subgrades

Este é um caso de uso simples que apresenta os conceitos básicos de subgrid do CSS. Um a 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

É isso, as colunas da grade pai foram efetivamente transferidas por um nível para em 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 geralmente trabalham com grades compartilhadas, desenhando linhas sobre um design inteiro, alinhando qualquer elemento que eles quiserem. Agora os desenvolvedores da Web também podem! Essa exatamente fluxo de trabalho agora pode ser alcançado, e muito mais.

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

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

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

Um
captura de tela do DevTools da grade do CSS do Chrome mostrando um layout de grade de tamanho para dispositivos móveis
em que linhas e colunas são nomeadas para identificação rápida: linhas e colunas
system-status, primary-nav, primary-header, main, footer e system-gestures.

O CSS a seguir cria essa grade, com linhas e colunas nomeadas para o dispositivo. o mesmo layout organizacional. 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 do CSS DevTools de antes, mas desta vez com alguns dos
interface do sistema móvel presente, com algumas sombras e um pouco de cor. Ajuda a ver onde o
o design está indo.

Dentro desse pai, há vários elementos aninhados. O design requer uma abaixo das linhas de navegação e de cabeçalho. As colunas mais à esquerda e à direita os nomes das linhas são fullbleed-start e fullbleed-end. Nomear linhas de grade dessa forma permite que os filhos se alinhem simultaneamente com a posição abreviação de fullbleed. Isso é muito conveniente, como você verá em breve.

Um
captura de tela ampliada da sobreposição de grade do DevTools, com foco especificamente em
os nomes das colunas de início e fim sem margens.

Com o layout geral do dispositivo criado com boas linhas e colunas nomeadas, use subgrid para transmitir as linhas e colunas bem nomeadas para layouts de grade aninhados. Isso é aquele 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 de CSS é um valor usado no lugar de uma lista de faixas de grade. As linhas e do elemento pai, agora são 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 foram não foi capaz de fazer referência às faixas de grade criadas por .device antes da subgrade.

Com tudo definido, a imagem aninhada pode ficar sem margens na layout, graças ao subgrid. Nenhum valor negativo ou truque, mas uma boa texto simples 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 sentada corretamente sobre a navegação primária e as linhas de cabeçalho e que se estende para cada uma das linhas de coluna nomeadas sem margens. — https://codepen.io/web-dot-dev/pen/WNLyjzX

Aí está, uma grade macro como os designers usam, implementada em CSS. Isso pode ser escalonada e crescer com você, conforme necessário.

Procurar suporte

O aprimoramento progressivo com CSS e subgrade é familiar e objetivo. Use @supports e, dentro dos parênteses, pergunte ao navegador se ele entende 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, "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 ferramentas de desenvolvimento de grade CSS, e o Chrome, o Edge e o Firefox têm ferramentas específicas para ajudar com a subgrade. Anunciado o Chrome as ferramentas 115 enquanto O Firefox já os tem há um ano ou mais.

Captura de tela do selo de subgrade encontrado nos elementos da seção "Elementos"
do painel de controle.

O selo da subgrade funciona como o selo da grade, mas distingue visualmente qual 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 para sua subgrade educação, divirta-se explorando todos esses ótimos recursos!