Grid
Grid
ELEMENTS & STRUCTURE
Types of Content Elements
Grid
Blocks: Ready-made Layouts
Forms
Adding a Hamburger Menu
Adding a Search Element
< BACK TO OVERVIEW
This article gives you an overview of how you can use the Grid to position content within your layout.
The Grid is a fast and powerful way to help you create responsive layouts that contain tables, or any part of your layout that has a grid-like structure.
Create and edit a Grid
To create a Grid, open Add Elements from the left panel. Select the Grid element and drag it onto the canvas.
On the canvas, an empty grid will appear.
Resizing the Grid
You can resize the Grid using the indicators in the corners, or just by extending the sides. All the cells in the Grid will grow or shrink accordingly.
Editing the Grid
To edit a Grid, select the Grid element. The edit button will appear in the top right corner. Once you click the 'edit' button, the grid will switch to edit mode and the Grid properties panel will appear.
To add columns and rows, select the add buttons that appear on the Grid in edit mode.
Adding a column will reduce the size of all columns, keeping the width of your Grid the same. Adding a row will extend the height of the Grid.
Grid Properties
Alternatively, you can use the Grid properties panel to add and/or remove rows and columns. The Grid properties panel opens automatically as soon as a Grid element is selected.
Tip:
Before adding content to your grid, check it in mobile view. By default, a grid will be single-column on mobile view. (E.g.: a 2 column, 4 row desktop grid will be displayed as a single-column 8 row grid on mobile). If you want your grid to have the same number of rows and columns on both device views, open grid properties when in mobile view and change the row and column numbers. Read more about this.
Adjust gaps between columns and rows
You can enter the desired gap size between columns and rows in the Grid properties panel, or adjust these on the Grid element itself by dragging the handles as shown below. Note that the gap size will be constant between all columns and all rows.
Adjust sizing of individual columns and rows
You can change the size of individual rows and columns by dragging the column / row headings as shown below. When you resize, the dimensions of the Grid will not change. The others columns or rows will adjust to fit into the available space. Gap sizes remain the same when you resize specific rows or columns.
You can also enter the desired value for a row or columns size directly in the column / row headings.
Row and column units: FR unit
The Grid element uses FR as a length unit. FR is a fractionable unit and 1FR represents 1 part of the available space. It allows adjusting the rows and columns while keeping the other rows/columns and gaps constant.
Tip:
If you have trouble adjusting your row heights, reset them by typing "1" on the blue heading at the left of each row. This will make all rows the same height. You can then individually adjust them by dragging the handles.
Place content in the Grid
You can add any type of content to Grid cells: textboxes, headings, images, boxes, and even another Grid. Drag the content to the desired placement. Note that the cell has to be empty for content to be placed in it.
Nested content: a Grid within a Grid
You can add multiple elements to a single grid cell. Place a structure element like a Box into a Grid cell, and then place other elements within that parent box.
Reflowing content in a Grid
If you need to move content around in your Grid, it likely will be useful to have the content reflow. This means that when you move content from one cell to another, content will adjust to other cells to make place for this change. Also, when needed, additional rows will be added.
You need to enable this behavior - and you can easily do so by clicking the checkbox in the Grid Settings panel:
Default Element Type
When a Grid is added to the canvas, all cells in that Grid are empty. You can have rows and columns that you add to a Grid prefilled with either boxes, textboxes or media. To do this, change the setting in Grid properties.
Manipulating content in a grid
You can change a content element that is placed in a Grid just as if it were any other content element. You can change its styling, apply a stylesheet and more.
Spanning Grid cells
You can span Grid cells across multiple other cells. To span a cell across other, you need to add content to it first. This can be any type of content: a box, a textbox, a media element,...
Select the content element, and drag any of the handles at the side of the content element to span it across multiple cells. The other cells need to be empty.
The content element now spans multiple cells:
Styling a Grid
When you are working on your design, you will mostly be applying styling to the actual content in the Grid (the elements contained within the Grid).
Applying styling to content in a Grid is the same as content anywhere else: you just need to select the actual content in the cell and apply the desired styling to it. You can assign style templates to the content of those cells.
You can also style the Grid itself, adding padding, borders or a background color or image. You will find these options in the styling panel on the left.
Below is an example of a Grid which has a 2px border applied to it.
Background on a Grid
You can add a background to a Grid. Do note that while you are in the editor, blank cells will display in a light blue color. On the published version and preview, the empty cells will not be visible. If you add a Box or content to the Grid, that content will be displayed.
The example below shows a Grid on the canvas, with all cells blank save for one which has an empty box (transparent) added to it.
Creating a responsive Grid
To create a responsive Grid, you will want to define how the layout should adapt on mobile devices. By default, all Grids on mobile will be set with a single column.
You can easily change this to be any number of columns you would like. Make sure you do this before you add content to the Grid, to avoid content reflowing issues.
We will use an example to illustrate how to do this. Imagine we have a 5 by 6 grid, so 5 columns with 6 rows with a total of 30 cells. On mobile this will by default be presented as a 1 by 30. We will change this to be a 3 by 10.
Here is how to change the settings on mobile:
1. Go to your mobile view/variant
2. Select the Grid, and Grid properties will open
3. First change the number of columns to the desired number, in this case 3.
4. Then change the number of rows to the desired number, in this case 10.
There you go, you have now changed your Grid on mobile to a 3 by 10, while on desktop it will still be a 5 by 6.
Contact Support
STAY IN THE LOOP
Sign up for product updates