Grid Editor
The Grid Editor panel allows you to visually edit & design your columns block layout.
You are freely building the complete layout of your columns block. You can add or remove blocks, move blocks around freely and adjust Height, Row Gap and Column Gap.
When you add or remove blocks, you are adding or removing actual blocks and not just placeholders compared to when Auto Grid is selected.
Open
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
Add Block
The Add Block property allows you to add a block.
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
Click the "+" icon to add a Block.
Remove Block
The Remove Block property allows you to remove a block.
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
Click the "X" icon in the right upper corner of the block to be removed.
Fractions
Adding fractions leaves potential space in case you want to add more modules or stretch modules to make uneven columns that will be duplicated in subsequent rows. Adding fractions will allow you to add more modules to your row.
This is only potential space because the auto grid system will base the grid layout on the module skeleton.
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
Adjust the number of fractions as required.
Minimum Height
The Minimum Height property allows you to specify what the minimum height of the columns inside the columns block should be.
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
Adjust the minimal height as required.
Row Gap
The Row Gap property allows you to specify the space between every row of columns.
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
Adjust the row gap as required.
Column Gap
The Column Gap property allows you to specify the space between every column in a row.
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
Adjust the column gap as required.
Allow Overlap
The Allow Overlap property allows you to overlap blocks.
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
Toggle Overlap property.
Visualiser
The Visualiser allows you to see how your blocks are displayed.
You can stretch and drag and drop your blocks and if overlap is toggled on, you can overlap blocks.
Last updated
