Contact Support
Need more help? Get in touch!
Contact support
We're available 6 a.m. to 6 p.m. PST
readz logo
© 2020 Readz All Rights Reserved
Grid
Create and edit a Grid
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.
To create a Grid, open Add Elements from the left panel. Select the Grid element and drag it onto the canvas.
The Grid will now switch to edit mode. To exit the Grid edit mode, click the 'stop edit' button in the top left corner. Alternatively, you can also click 'Esc' on your keyboard or click anywhere on the canvas outside of the Grid.
You can also enter the desired value for a row or columns size directly in the column / row headings.
Place content in the Grid
The content element now spans multiple cells:
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 and 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.

Editing the Grid

To edit a Grid, select the Grid element. The edit button will appear in the top right corner. Once you clicked the 'edit' button, the grid will switch to edit mode and the Grid properties panel will appear.
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.
Add columns and rows
To add columns and rows, select the add buttons that appear on the Grid in edit mode.
Adding a column will add a column and will reduce the size of all columns, keeping the width of your Grid the same.
Adding a row will add a row to the Grid, extending 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.
Adjust gaps between columns and rows
You can enter the desired gap size between columns and rows in the Grid properties, 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.
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.
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.
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.
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 instead. To do this, change the setting in Grid properties.
Spanning Grid elements
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.
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.
Creating a responsive Grid
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.

Styling a Grid
When you are working on your design, you will mostly be applying styling to the actual content in the Grid, which is 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 and so on.

There are however some styling options available to the actual Grid itself, like padding, borders, and even adding a background 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 display of course. Also, once 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.
When you add a Grid to the canvas, the Grid is 'empty', meaning that all the Grid cells are empty.

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.