Response CSS Grid with fluid thumbnails

by elkcityhazard

HTML

<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>

CSS

.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%;
}

JavaScript

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}`
  })
})