Powered by Minitek FAQ Book

Custom grids


This feature is available only in Pro version.

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.

Custom grids

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

Custom grids

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.

Custom grids

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.
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.

Custom grids

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.

Custom grids

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.

Custom grids

The item will now span across 3 columns.

Custom grids

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.

Was this helpful?