Sibling grids

The Sibling Grid layout system utilizes settings available from with each block instance as you attach it to the Content region. Users can set the options to:

  • Default - 100% of the available width
  • 1/2 - 50% of the available width, resulting in two blocks side by side
  • 1/3 - 33% of the available width, resulting in three blocks side by side
Block style options related to branding color and column size.
Screen capture of the Block Styles section where sibling widths can be applied.

It is vital that all the blocks in a given row share the same width setting or else your page layout will break.

Locating the settings

The configuration is done on the block related to the location and you have two methods for accessing it:

  1. In-context editing - If the block is already in place, you can hover your mouse over its upper right corner and click to Configure block, or
  2. Navigate to Shortcuts > Blocks or Manage > Structure > Block Layout and then locate your block in its assigned region and select the Configure button.

Configuration options

Once you have accessed the block, locate the Block Styles section (see Figure 1 above) and modify the Column size to your desired width.

WARNING: When applying blocks to the Header and Footer regions ALWAYS set the column width to "Default". The system is designed and styled to configure these two regions for you. Applying a width will cause these sections to break and ruin its look.

Demo - 1/2 Setting

Sibling blocks with 1/2 settings used.
This example displays sibling blocks attached in the Content region, all of which have been assigned a 1/2 width.


Demo - 1/2 and 1/3 Settings

A mix of siblings with 1/2 on top and 1/3 below.
This example shows two rows of siblings with the block's in the first row each set to 1/2 and the blocks in the second row each set to 1/3.