Algumas semanas atrás, falei no
Frontend NE em Newcastle e expliquei em sua maioria quais recursos seriam no CSS Grid Subgrid do Grid Level 2. Não havendo implementação dessa propriedade (nos navegadores), modelei várias demos usando o DevTools. performances.
No caminho para San Francisco, no Smashing Conf, onde conduzi um workshop sobre CSS Layout, tive acesso à versão de teste do Firefox Nightly, que teve uma implementação antecipada dessa propriedade.
Isso significa que eu preciso refazer alguns slides das minhas apresentações em maio, capturas de tela reais serão usadas lá.
Publiquei algumas capturas de tela no Twitter e publicarei todos os meus exemplos no
Grid by Example , assim que a propriedade CSS Grid Subgrid funcionar com o sinalizador no assembly principal do Firefox Nigtly. No entanto, para quem tem coisas mais importantes a fazer do que assistir ao Twitter no fim de semana, aqui estão algumas capturas de tela. Eles contêm links para exemplos do
My CodePen para que você possa ver o código dos elementos Subgrid (subgrid). Eu destaquei o Grid (grid) e Subgrid (subgrid) no DevTools do Firefox para ajudá-lo a ver o que você precisa olhar.
Grade para colunas e linhas
Nesse caso, a subgrelha está nas colunas e linhas do elemento pai. Isso significa que na região da sub-grade não há grade oculta, pois os dois tamanhos estão vinculados às faixas disponíveis do pai.
CodePen - Grade para colunas e linhasMalha apenas da coluna
Nesse caso, usei uma sub-grade para as colunas. Isso significa que eu posso usar faixas de malha implícitas para adicionar quantas linhas forem necessárias para os elementos. As linhas usam seu próprio tamanho como uma grade aninhada sem uma sub-rede.
CodePen - Grade Somente ColunaApenas sub-rede
Nesse caso, criei as linhas subgrid e defini as colunas, como de costume em unidades fr.
Como você pode ver, os caminhos da coluna não correspondem aos pais, porque eles usam sua própria definição de grade.
CodePen - Subgrid apenas para stringsEstou muito feliz por ver progresso no desenvolvimento do CSS Grid Subgrid, bem como a oportunidade de falar sobre isso nos meus seminários e relatórios.
Mais informações sobre o Subgrid podem ser encontradas nesses links: