Using the masonry template

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; 
  } 
} 
     
...