Best way to manage images for a masonry grid in a CMS?

Question

I have a masonry grid using masonry/packery js plugin in a CMS and it is very cumbersome for the users to manage the images because they need to be exact ratios to get the proper brick effect and fill all the gaps which is a big pain for the non technical users of the cms to update or change images. Also the plugin is slow to initialize.

Are there any modern html solutions or newer js plugins out there nowadays with newer tech like possibly flexbox or css grid that would give me the same masonry effect without having to predefine the ratios of every image and make it so the users of the cms can just upload any size image and it will fit in a packery layout without having to define where it should be in the layout or resize the image on upload?

Note this is in custom cms so I am looking for answers that are not specific to the cms platform like WordPress.

Answer 1

Rafaela Ferro wrote an article on medium that goes into amazing detail on creating masonry style image layouts using CSS grid that allow for great flexibility. Its less than 30 lines of CSS and is responsive as well.

By taking advantage of image object-fit: cover, the images can be any size and the grid will take care of the rest. The only thing the user would probably want to do is make sure the image looks good when zoomed into the center (due to object-fit).

Code taken directly from her article:

.gallery { 
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 250px 150px;
  grid-auto-flow: dense;
}

.gallery .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 480px) {
  .gallery .item:first-child {
    grid-area: 1 / 1 / span 2 / span 2;
  } 
  
  .gallery .item:nth-child(3n) {
    grid-column: span 2;
  }
}

<div class="gallery">
  <div class="item">
    <img src="https://images.dog.ceo/breeds/weimaraner/n02092339_431.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/leonberg/n02111129_17.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/borzoi/n02090622_5890.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/elkhound-norwegian/n02091467_3090.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/dingo/n02115641_7158.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/bluetick/n02088632_2149.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/bluetick/n02088632_1625.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/ridgeback-rhodesian/n02087394_9369.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/dachshund/dog-495133_640.jpg">
  </div>
  
  <div class="item">
    <img src="https://images.dog.ceo/breeds/chow/n02112137_8212.jpg">
  </div>
</div>