Creating tiles of boxes by using columns

Insert a “Regular” page section.

Insert a row with the number of columns you want to create you boxes

Insert a “Regular” page section.

Insert a row with the number of columns you want to create you boxes

Row settings

Use custom gutter width

Yes if you want to be able to remove the cap between columns (set Gutter Width = 1)

Equalise column heights = YES

Width and max width

Can be set to 100% if you want to go full screen width

Marging and padding = 0

Then for each of your column settings

Can be easiest to create a CSS_Class and assign it to each, so you don’t need to copy settings to every one every time you change something.  An example:

.home_page_info_squares {
  margin: 0px;
  padding: 26px;
  color: #000;
  font-weight: 600;
  font-size: 1.6em;
  line-height: 1.4em;
}

Altering how the wrap occurs on smaller tablet and phone screens

Setting a css min width properly for each column or the element you put in it doesn’t seem to work, you just get clipping occurring. The best solution is probably to duplicate the row and set the Advanced > Visibility for each to different screen sizes and then adjust to how you want each row to be laid out.