Tengo una cuadrícula flexible que muestra elementos de diferentes anchos (rectángulo, cuadrado, etc.) y extrae datos de una API, por lo que la lista es dinámica, por lo que cada fila siempre es diferente. Esto a menudo da como resultado elementos flexibles "huérfanos" al final de la cuadrícula flexible, especialmente en los puntos de interrupción más bajos.

He notado que generalmente solo tengo 2 o 3 elementos persistentes en la última fila.

Mi objetivo es mostrar solo filas completas y deshacerme de todos los elementos huérfanos.

Pensé en diferentes formas de lograr esto y noté que todos mis elementos huérfanos 1) ocurren cuando reduzco mi pantalla por debajo de 1750px y 2) los elementos huérfanos están por encima de 300 px, grandes ya que no tienen contenido la próxima vez que obliga que sean pequeños.

Pensé en agregar un detector de eventos de cambio de resize para verificar solo los últimos 6 elementos de mi cuadrícula flexible. Si su altura es superior a 310 , agrego el estilo display: none , de lo contrario display: block .

 this.throttledCheckOrphanItems = throttle(() => this.checkOrphanItems(), 300); window.addEventListener('resize', this.throttledCheckOrphanItems); 

 checkOrphanItems() { if (window.innerWidth > 1750) { return; } const items = document.getQuerySelectorAll('.movieItems'); for (let x = items.length - 1; x >= items.length - 6; x--) { const height = items[x].getBoundingClientRect().height; if (height >= 310) { items[x].style.display = 'none'; } else { items[x].style.display = 'block'; } } },

"Funciona", pero no es una experiencia fluida.

Sé que esta no es una gran solución, pero no puedo encontrar otra forma sin sacrificar la configuración de mi cuadrícula. ¿Hay una mejor manera de que solo pueda mostrar filas completas? Si no es así, ¿hay alguna manera de optimizar mi solución o hacerla más eficaz?