Documentation

Custom grids allow you to create any kind of custom masonry layout. To create a custom grid, go to the component dashboard and click on Custom Grids, then click on Add New Custom Grid.

Placeholder Columns

A grid consists of 1 up to 12 placeholder columns. Grid items must be placed within columns and may span across multiple columns and rows. A new custom grid has 4 placeholder columns.

You can change the number of columns by entering a new value in the field Columns and clicking on Update columns.

Adding Grid Items

In the Add new item box, select Landscape in the field Size. The fields Cell height multiplier and Columns are then automatically updated to reflect the default attributes of the selected item size.

Cell height multiplier

A multiplier for the item cell height. Determines the number of rows that this item will span across. For example, if the cell height for a particular wall and screen size is 240px and the multiplier is 2, then the height of this item will be 2 * 240 = 480px.

Columns

Determines the number of columns that this item will span across.

Click on Add Item to add this new item in the grid. The item will always be placed in the leftmost available position and will try to fill any gap in a row before continuing to the next row.

Now add a new item in the grid of size Big. As you can see, the default Cell height multiplier value for a big item is 2, so it will span across 2 rows and will be placed immediately after the landscape item.

Resizing Grid Items

To resize an item, click on the icon at the bottom right. The attributes panel for this item will open on the left sidebar. For example, click on the edit button of the big item and enter the value 3 in the field Columns. Then click on Update Item.

The item will now span across 3 columns.

Removing Grid Items

To remove an item from the grid, click on the icon at the bottom right. After the item has been removed, the remaining items will be automatically rearranged to fill all gaps.

Repositioning Grid Items

To reposition a grid item, simply drag and drop the item in a new position. When repositioning items, the grid will automatically readjust to fill all gaps. This means that repositioning a specific item may change the position of all items in the grid.