A masonry grid layout works by placing elements in an optimal position based on available vertical space, sort of like a mason fitting stones in a wall. The Cards module of Bootstrap enables you to organize elements (cards) into masonry-like columns with just CSS. The Card module is a flexible and extensible content container. It replaces the panels, thumbnails, and wells used in earlier versions of Bootstrap.
The JBST 4 theme already contains a template for you, which organizes your post into masonry-like columns.
You can test the masonry template on your front page by copying the template-masonry file to the front-page.php file. Or select a page using this template as your front page.
The CSS code to display the masonry items in the right manner is compiled from the SCSS in the assets/sccs/includes/_masonry.scss file. The SCSS code in this file looks as follows:
.masonary {
.card-columns {
padding-top: $spacer-y;
}
}
...