CMS Development

Ltkhaw
Participant

Need Help!!

Was looking to implement something like the following screenshot (with data in hubdb) whereby the boxes are variable size (instead of fixed) depending on the length of the contents. Any advice or code snippets to enable this?

 

col example.JPG

0 Upvotes
3 Replies 3
stefen
Key Advisor | Partner
Key Advisor | Partner

Need Help!!

@Ltkhaw probably the simplest option would be to use CSS columns e.g.:

.parent {
  column-count: 3;
}

However, the drawback to this approach is the content is sorted from top to bottom instead of left to right.

Stefen Phelps, Community Champion, Kelp Web Developer
piersg
Key Advisor

Need Help!!

@Stephanie-OG is right, using a library or writing your own script for this is the way to go as you want your masonry items to be of varying heights.

 

If you want to write your own JS to do this, there's a good step-by-step write up here, or you can use the library Stephanie linked.

 

If you're ok to define the dimensions of the masonry items, you can avoid JS and use CSS Grid like so.

Stephanie-OG
Key Advisor

Need Help!!

Hi there! I'd probably use something like Masonry for that type of layout - if you set the width of your columns on different screen sizes using CSS, it should handle the height difference.

 


Stephanie O'Gay Garcia

HubSpot CMS Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!