Quiero crear un diseño de cuadrícula dinámico de 2 columnas y cualquier cantidad de filas allí. en esta cuadrícula, pongo el nombre del elemento. según la longitud del nombre del elemento, el ancho de la cuadrícula se ajustará. como si la longitud del elemento es inferior a 13, entonces el elemento se ajusta en la columna de la cuadrícula ('1/2') o ('2/3'), de lo contrario, toma el ancho ('1/3') de la cuadrícula. y hay una condición es que en el diseño de la cuadrícula no haya nadie que se quede en blanco.
Lo intenté e hice el código, pero en algunos casos, hay algunos espacios en blanco. Así que trate de compartir la solución óptima conmigo.
const setGrid = (a) => { a.forEach((obj) => { if (obj.innerText.length > 13) { const parent = obj.parentNode; if (parent) { parent.style.gridColumn = "1 / 3"; } const parentLeft = parent.previousSibling; if (parentLeft) { if (parentLeft.innerText.length < 13) { const parentLeftL = parentLeft.previousSibling; if (parentLeftL) { if (parentLeftL.innerText.length < 13) { const parentLeftLL = parentLeftL.previousSibling; if (parentLeftLL) { if (parentLeftLL.innerText.length < 13) { parentLeftLL.style.gridColumn = "1/2"; parentLeftL.style.gridColumn = "2/3"; parentLeft.style.gridColumn = "1/3"; } else { parentLeftLL.style.gridColumn = "1/3"; parentLeftL.style.gridColumn = "1/2"; parentLeft.style.gridColumn = "2/3"; } } else { parentLeftL.style.gridColumn = "1/2"; parentLeft.style.gridColumn = "2/3"; } } else { parentLeftL.style.gridColumn = "1/3"; parentLeft.style.gridColumn = "1/3"; } } else { parentLeft.style.gridColumn = "1/3"; } } else { parentLeft.style.gridColumn = "1/3"; } } } }); };