const gridItems = document.querySelectorAll('.grid-item') gridItems.forEach((item) => { const img = item.lastElementChild img.addEventListener('load', function() { item.style.height = img.clientHeight + 'px' const spans = Math.ceil(item.clientHeight / 10); item.style.gridRowEnd = `span ${spans}` }) })
<div class="grid-container"> <div class="grid-item"><img src="https://source.unsplash.com/250x900/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x500/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x400/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x175/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x200/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x135/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x200/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x100/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x125/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x700/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x625/?nature,water" alt="image"></div> <div class="grid-item"><img src="https://source.unsplash.com/250x633/?nature,water" alt="image"></div> </div>
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4px; grid-auto-rows: repeat(10px); } .grid-item { margin: auto; } .grid-item img { max-width: 100%; }