What is the Sibling Grid?
As an interim solution, the SiteFarm team created an option called Sibling Grid that will allow you to line two or three blocks side by side in a row. This is configured through the settings in each block. Please note that this system is imperfect and is only a placeholder for the official Layout system currently in development by the Drupal User Community. We opted to hold off creating a more comprehensive solution as the Layout Initiative has been on the Drupal Core roadmap for some time, and it was thought detrimental to the service and our users' experience to create a solution that would only result in a need to remove the framework and find a way to migrate clients' existing content into the new solution added to Drupal Core.
Creating a Block Sibling Grid
Warning: blocks may not line up exactly as you envisioned as this is intended as a very simplified layout. Follow a row of two or three blocks with a full width "default" block, or with the alternate number of blocks. For example, if you start with a row of 2, make the next row 1 or 3 blocks.
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
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:
- 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
- Navigate to Shortcuts > Blocks or Manage > Structure > Block Layout and then locate your block in its assigned region and select the Configure button.
Once you have accessed the block, locate the Block Styles section (see Figure 1 above) and modify the Column size to your desired width.
Demo - 1/2 Setting
Demo - 1/2 and 1/3 Settings