Dave Rupert con un poco de magia CSS moderna que aborda uno de esos enigmas clásicos: ¿qué sucede cuando el CSS para el componente no puede manejar el contenido que le lanzamos?
La situación específica es cuando una cuadrícula de diseño espera un número par de elementos, pero en su lugar se le proporciona un número impar. Nos quedamos con un elemento "colgante" al final que altera el diseño. Parece que lo que se necesita es algo CSS defensivo y Dave lo logra.
él alcanza para :has() para escribir un ingenioso selector que detecte el último elemento en una cuadrícula que contiene un número impar de elementos:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Rompiendo eso:
- Tenemos un contenedor principal de
.items. - Si el contenedor
:has()an.itemniño que es el último de su especie, - …y eso
.itempasa a ser una instancia impar, - …luego seleccione el primero
.itemelemento de ese tipo y dale estilo!
En este caso, ese último .item se puede configurar para que ocupe el ancho completo para evitar agujeros en el diseño.
Si... entonces... ¡CSS tiene poderes lógicos condicionales! Por el momento, solo estamos hablando de soporte para Safari TP y Edge/Chrome Canary, pero eso es bastante impresionante.
Por casualidad, Temani Afif recientemente compartió trucos que aprendió mientras experimentando con cuadrículas implícitas. Al aprovechar el algoritmo de colocación automática de CSS Grid, ni siquiera tenemos que declarar explícitamente un número fijo de columnas y filas para una cuadrícula: ¡CSS las creará para nosotros si son necesarias!
No, las técnicas de Temani no son soluciones alternativas al dilema del "colgador" de Dave. Pero al combinar el enfoque de Temani de patrones de diseño de cuadrícula repetibles con el uso defensivo de CSS de Dave de :has(), obtenemos una cuadrícula bastante poderosa y de apariencia compleja que es liviana y capaz de manejar cualquier cantidad de elementos mientras mantiene un patrón equilibrado y repetible.
