Grids are the thing that will help to make your design dreams become a reality!
With a grid, you can decide where things are positioned on your page (yet maintain full responsiveness).
Adding a grid is like adding a table in a Word document, except that your options to fill and style each column/row are way more advanced.
Each grid item can be filled with images, text, paragraphs, and even a div block or another grid.
Adding a grid
To add a grid, navigate to the top panel. Look for the Square icon, unfold and click Grid.
By default, you will see 2x2 boxes (called “grid items”) within the grid.
To change this structure and select the amount of grid items, go to the Design tab on the right-hand side. Then under Layout, set how many columns and rows you want to display.
To add more columns and rows, click the Plus icon right next to Grid in the layers sidebar on the left.
If not all items are displayed, head to the Design tab on the right-side and check under Layout to see how many rows and columns you’ve added.
Nesting elements means that you tie them all together so you can easily move them at once. To nest elements within a grid item, you first need to add a Div block and then add everything else below (headings, text, etc.).
Duplicating and deleting
If you want to duplicate an item, right-click in the Layer sidebar on the grid item you want to duplicate and click Copy. Then click on the main grid layer (titled “Grid”) and paste the item.
Keyboard shortcuts: On a Mac, use
⌘ + C to copy and
⌘ + V to paste. For Windows, press
Control + C and
Control + V.
To delete a grid item, right-click in the Layer sidebar on the grid item you want to erase and click Delete. You can also use the Backspace key
⌫ on your keyboard.
You can use these same actions when clicking directly on the grid item in your canvas.
Reordering is as simple as drag and drop. In the Layer sidebar on the left, click on the grid item you want to move and drag it to the preferred place in the list. To place the grid item on the same level as the other grid items, drop it when you see a blue line in between items (and not a border around an item).
If you don’t want your grid items all glued together, use gaps. To add a gap, click on the main Grid layer and unfold Layout in the Design tab. Now you can use the sliding scale or manually pick a number to define the size of the gap.
You can adjust the size for the entire grid or separate grid items. To do so, click on the layer and unfold the Sizing section in the Design tab. Here you can adjust the height and width. If you want to set a minimum or maximum height or width, you can do that here too.
Setting a minimum or maximum will make sure the item doesn’t shrink or expand beyond the set value. You can use this setting if, for example, you want to prevent empty items from collapsing or to avoid stretching your content beyond its intended size.
You can align elements and content horizontally and vertically.
To vertically align, click on Grid in the Layer sidebar and unfold Layout in the Design sidebar on the right. You can then vertically align how grid items are shown within the grid (start, center, end, stretch and baseline).
To horizontally align content, click on the element within the grid item (like a heading), unfold Typography in the Design sidebar and set the alignment to left, center, right or justify.