Grid layout fill extra space with content

[viveknath322]

I’ve created a grid layout to display products, images are of different height so there are some extra blank space below some columns. Is it possible to fill up the available space with the card just below it like a masonry layout

JS Fiddle link

https://jsfiddle.net/viveknath322/t2hgkspe/1/

[PaulOB]

@viveknath322

Is it possible to fill up the available space with the card just below it like a masonry layout

It’s not possible at the moment but CSS3 does have a proposed masonry property value for CSS grid. Hopefully in the not too distant furture it will be possible.

Presently the only way to get close to the masonry layout (without JS) is to use the css columns structure which has good support.

Here’s an old basic example of mine.

If you want to play around with columns then add this code at the end of your css for testing.

.product-card{
  margin-bottom:1rem;
  break-inside:avoid;
   /* display: inline-block; If needed this will stop block being split across columns in older browsers. Use break-inside: avoid for modern browsers; */
}
section.related-collection {
    display:block;
    columns:4 20rem;
    gap:1rem;
 }

Then it should look something like this.

You would of course need to test and tweak thoroughly as columns can be awkward to size but they do automatically scale down from 4 colums to one without media queries should space allow.