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.
Depois da subgrade, é possível alinhar o conteúdo de tamanho variado.
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 */
}
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.
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.
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.
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.
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;
}
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.
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.
- MDN (em inglês)
- Rachel Andrew com legendas alinhadas
- Rachel Andrew com 10 ótimos exemplos
- Rachel Andrew com um site de exemplos
- Artigo de Ahmad Shaded
- Michelle Barker no CSS Day 2022
- Cards
- Codepen da Jhey (em inglês)
- Codepen de Ahmad Shaded
- Codepen de Takeshi Kano (em inglês)
- Codepen por Arvid (em inglês)
- Codepen de Chris Coyier (em inglês)
- Codepen por Miriam Suzanne (em inglês)
- Chris Coyier com formulários
- Facundo Corradini com alinhamento de formulário
- Chris Coyier com marcadores de itens de lista alinhados
- Michelle Barker saindo do contêiner para alinhar à grade principal
- Miriam Suzanne mostrando nomes de linhas nomeadas e interações de subgrade
- Kevin Powell com noções básicas de área nomeada
- Kevin Powell com listas alinhadas
- Shannon Moeller com listas alinhadas
- Kevin Powell com uma grade no nível da página transmitida para os componentes
- Elad Shechter com sobreposição e substituto do devtool
- Aaron Iker com um bom uso tipográfico da subgrade para alinhamento de referência de notas de rodapé
- Adam Argyle com uma imagem sem margens dentro de um artigo