Resolvendo problemas complexos de alinhamento com grade e subgrade CSS

Hoje, aprendi que você pode aninhar várias subgrades em um contêiner de grade . Por que poderíamos querer fazer tal coisa? Era uma tarefa complexa que eu estava enfrentando e que esperava resolver usando uma boa e confiável grade CSS.

Imagine isso:

Você tem uma lista de guias do navegador fechadas. Cada item tem uma coluna para:

• o título do site
• o URL
• um carimbo de data/hora de quando você fechou essa guia
• um botão descartar que removerá o item da lista

• o botão descartar
• o restante do conteúdo no item da lista que, quando clicado, reabrirá a guia (veja a imagem acima, onde estou passando o mouse sobre a área acionável do primeiro item da lista)

Então aqui está o desafio: o conteúdo de cada coluna precisa se alinhar verticalmente, apesar de cada item ter conteúdo potencialmente diferente de várias larguras. A lista deve ser responsiva sem larguras fixas para cada coluna. Então, como garantimos que cada coluna esteja alinhada verticalmente, apesar de cada item da lista existir independentemente dos outros? Pode-se pensar em usar a tablepara tal tarefa em vez de uma lista não ordenada, mas na verdade há uma maneira de evitar isso. Digite CSS gride subgrid.

Definimos o seguinte para o elemento de lista não ordenada de encapsulamento:

ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr) repeat(2, min-content);
  row-gap: 8px;
  column-gap: 8px;
}

No item da lista, definimos o seguinte:

li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 7;
}

Por fim, adicionamos o seguinte à área acionável envolvendo os elementos que queremos alinhar (título, URL e carimbo de data/hora).

.actionable-content {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 6;
}

Queremos que nosso elemento de título abranja 3 das 7 colunas e o URL abranja 2 das 7 colunas usando o seguinte:

.title {
  grid-column: span 3;
}

.url {
  grid-column: span 2;
}

Então, temos 7 colunas no total. 3 colunas são usadas para o título, 2 para o url, 1 para o carimbo de data/hora e 1 para o botão de dispensar. A verdadeira mágica é com o min-contentusado para a largura da coluna timestamp. A grade CSS agora está olhando para a largura mínima que pode ser utilizada para esta coluna de carimbo de data/hora, dado o elemento com a largura máxima entre TODOS os itens da lista (neste exemplo, “1000yrs ago” sendo o mais largo).

E aí está, um layout de grade totalmente responsivo de itens de lista com subgrades aninhadas DUPLAS :

Aqui está uma demonstração codepen da subgridmágica em ação.

Dica profissional : No Firefox (e provavelmente em outros navegadores modernos), você pode selecionar estas caixas grid/ subgridno inspetor de ferramentas de desenvolvedor para exibir as linhas de grade desse elemento: