Grid Editor
Last updated
Last updated
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.
Select a Columns block.
In the Primary tab of the Block Inspector, open the Grid Editor.
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.
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.
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.
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.
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.
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.
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.
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.
