Need Help!!

Highlighted
New Contributor

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

Reply
0 Upvotes
3 Replies 3
Regular Advisor

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!

Highlighted
Esteemed Contributor

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

Highlighted
Regular Advisor | Partner

@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