The Grid Layout is based on CSS and as such divides a page into rows and columns and uses grid cells for aligning views in the layout. Additionally, this layout makes it easy to design a page without having to use floats and positions, and you can achieve almost any type of layout you need.

Creating/Defining Grid Layout

1. From the admin menu, create a page.
2. Access this page and enter the Edit mode.
   
3. Click the Page Options icon in the bottom-left corner.
   A pop-up is displayed.
4. Click Grid to select it.
   
5. Click Close.
   The Edit Grid Layout button is displayed on the page.
   
6. Click Edit Grid Layout to start defining the layout.
   

As seen in the screenshot above, there are three areas:

1– where you add and/or remove columns and set their size in either pixels or fractions

2– where you add and/or remove rows and set their size

3– the preview where you can see what the grid will look like based on the columns and rows you added

Basic Concepts

• Columns are the vertical lines of grid items.
  
• Rows are the horizontal lines of grid items.
  
• A grid cell is the smallest unit on a grid.
  
• The grid can be fixed, that is, you can set it to a specific pixel (px) that fits the layout you desire. You can also create a grid using flexible sizes with the fr unit (fractional, which means a portion of the remaining space).
• Subgrid allows grid items to have a grid of their own that inherits grid lines from the parent grid.

Stacking Items

After defining the grid, go to the Items tab to add items that will be immediately previewed in the dedicated space. Here you can control the order in which items stack up – you can move, expand, or shrink items.

Once you are done stacking items, after saving your changes, you will land on the page and those items will be displayed. You can proceed by adding visualizations.

You can watch a short demo here.

Some limitations:

• When you add visualizations, you will not be able to add/remove rows or columns via the container’s menu (three dots on the right);
• When you add visualizations, you will not be able to resize visualizations by dragging their borders;