Dave Rupert com alguma magia CSS moderna que aborda um daqueles enigmas clássicos: o que acontece quando o componente CSS for é incapaz de lidar com o conteúdo que lançamos nele?
A situação específica é quando uma grade de layout espera um número par de itens, mas é fornecida com um número ímpar. Ficamos com um elemento “pendurado” no final que atrapalha o layout. Parece que o que é necessário é algum CSS defensivo e Dave consegue isso.
Ele alcança :has() para escrever um seletor bacana que detecte o último item em uma grade que contém um número ímpar de itens:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Dividindo isso:
- Temos um contêiner pai de
.items. - Se o recipiente
:has()an.itemcriança que é a última de seu tipo, - …e essa
.itemacontece de ser uma instância de numeração ímpar, - …depois selecione o primeiro
.itemelemento desse tipo e estilize-o!
Neste caso, esse último .item pode ser configurado para largura total para evitar buracos no layout.
Se… então… CSS tem poderes de lógica condicional! No momento, estamos falando apenas de suporte para Safari TP e Edge/Chrome Canary, mas isso é incrível.
Por acaso, Temani Afif recentemente compartilhou truques que aprendeu enquanto experimentando grades implícitas. Aproveitando o algoritmo de posicionamento automático do CSS Grid, nem precisamos declarar explicitamente um número fixo de colunas e linhas para uma grade — o CSS irá criá-las para nós se forem necessárias!
Não, as técnicas de Temani não são soluções alternativas para o dilema do “pendular” de Dave. Mas combinando a abordagem de Temani para padrões de layout de grade repetíveis com o uso de CSS defensivo de Dave :has(), obtemos uma grade bastante poderosa e de aparência complexa, leve e capaz de lidar com qualquer número de itens, mantendo um padrão equilibrado e repetível.
