0
181
Views¿Puede un elemento de cuadrícula ajustar su extensión en función de la altura?
¿Hay alguna forma de obtener un comportamiento similar al que se muestra en el dibujo? Quiero decir, por supuesto, manualmente podemos especificar grid-row: span x , pero grid-row: span auto parece no funcionar. Necesito que todos los elementos de la cuadrícula tengan el mismo tamaño, pero cuando un elemento tiene que cambiar el tamaño (debido al desbordamiento de texto), necesito configurar la grid-row: span 2 , y cuando se hace más grande, respectivamente, un número más alto.
Para lograr algo como esto, necesito escribir .js o ¿se puede hacer solo con css? Aquí está el código sandbox
3 answers
Answer question0
Puede agregar altura mínima a la clase ".item" para establecer el mismo tamaño de los elementos de la cuadrícula.
.item{ min-height:100px; } .App { font-family: sans-serif; text-align: center; } .container { width: 200px; height: 200px; } .grid { width: 100%; background-color: chartreuse; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; grid-auto-flow: dense; } .item { background-color: brown; height: 30px; min-height:100px; } .large { height: fit-content; word-break: break-all; grid-row: span auto; } <div class="App"> <div class="container"> <div class="grid"> <div class="item"> </div> <div class="item large"> asdasdasdasdasdsadasdasdasdasdasdasd{" "} </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> </div> </div>0
A veces es bueno repasar los fundamentos:
HTML es para la estructura.
CSS es para la presentación.
JavaScript es para el comportamiento.
Su problema cae dentro de 3 ( "el elemento tiene que cambiar el tamaño (debido al desbordamiento de texto)" )
0
let items = document.querySelectorAll('.item') items.forEach(item => { if(item.scrollHeight>item.clientHeight){ let itemSpan = Math.round(item.scrollHeight/40) + 1 // (height = 30) + (gap = 10) 40 => item.style.cssText = `--n : ${itemSpan}` } }) .container { width: 200px; margin: 15vw auto; } .grid { width: 100%; background-color: chartreuse; display: grid; justify-items: center; grid-template-columns: 1fr 1fr; grid-auto-rows: 30px; grid-auto-flow: row; grid-gap: 10px; word-break: break-all; } .item { background-color: gold; min-height: 30px; width: 50px; padding: 5px; grid-row: auto / span var(--n); /* var(--n) is calculated with js */ box-sizing: border-box; } <div class="container"> <div class="grid"> <div class="item">1</div> <div class="item ">2 Lorem ipsum dolor sit amet consectetur adipisicing </div> <div class="item">3</div> <div class="item">4</div> <div class="item">5 t amet consectetur adipisi</div> <div class="item">6 lorem</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9 t amet consectetur adipisi </div> </div> </div>