Documentation

Powered by Minitek FAQ Book

Custom grids

  Info

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


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


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


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


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?
Loading...
0