A grid allows you to divide your page into rows and columns. You can then arrange the grid so that it is rendered in a particular row/column. Grids can be nested allowing for complex layouts.

You can use it to alter the look and behaviour of your grid, such as alignment, order, flow, and padding.

Adding a grid

Drag the grid element inside your layout. Alternatively, you can drag any Layout components from the Components panel

Settings

By default a grid is a set of 2 column. You can adjust settings to customize the grid by visualizing selecting the right properties from the right panel.

  • Desktop Layout:
  • Horizontal Alignment: Horizontally set alignments for the elements inside columns.
  • Vertical Alignment: Vertically set alignments for the elements inside columns.
  • Desktop distribution
  • Mobile Layout: Customize the way you'd like to setup your layout for mobile.
  • Mobile distribution: Configure the columns width distribution for mobile.

Manual Layout

If you need to define a custom layout that is not available from the desktop layout section, click on the arrow and select Manual Layout. 

From here, you'll be able to define the number of columns you'd like to have.

Additional settings

  • Number of columns: specify the number of columns for the grid
  • Gutters: add gutter blank space between columns
  • Gutters direct: If you only want direct child columns to receive gutters

Use cases

Buttons alignements

You can use a grid to create a group of button next to each other. With grid settings, you can configure alignments, margin and padding. 

Did this answer your question?