A Grid layout divides a page or part of a page into rows and columns, allowing you to create flexible and sleek web pages.

It’s a powerful tool for precise element placement without the need to define position or float values, resulting in more orderly and consistent designs.

Grid Container and Grid Items

In a Grid layout, the parent element becomes the Grid Container, and its direct children become Grid Items.

Grid VS Flex

The main difference between Grid and Flex is their structure. Grid is a two-dimensional layout, allowing both rows and columns in a single structure. Flex, on the other hand, is one-dimensional, either consisting of columns or rows at a time.

Check out detailed documentation on Flex.

Adding a Grid

To add a Grid to your page:

1. Open the Elements Panel on the left-hand side.
2. Find the Grid element under the Layouts section and drag it onto your canvas.

You can also convert existing elements on your canvas to Grid Items. Select the element, go to the Style Panel on the right-hand side, choose Structure, and select Grid (multi-directional) from the drop-down menu.

Grid Structure

After adding a Grid to your canvas, you can customize its structure under the Structure tab in the Style Panel on the right-hand side. Here are the essential settings:

Grid Tracks

A Grid Track represents the space between two grid lines, defining rows or columns. Use these settings to control the number of columns and rows in your Grid.

• Column Tracks: Left toggle is for the number of columns.
• Row Tracks: Right toggle is for the number of rows.

If you want your grid to have the same number of columns and rows, click on the link icon which is located between the track toggles.

Grid Gap

The Grid Gap property defines the space between each column or row. 

• Column-gap: Left toggle is for the gap between columns.
• Row-gap: Right toggle is for the gap between rows.

Keep in mind that the gap is measured in pixels but that can be changed from the drop-down list of units.

You can use the link icon that’s located between the two gap toggles to ensure all your columns and rows have the same gap.

Place Items

After you’ve added your elements to the grid, you can adjust their alignment. To do this go to Style Panel > Structure > Place Items. Here, you’ll find drop-downs for the following options:

• Horizontal Alignment: Change the horizontal alignment of your items.
• Vertical Alignment: Change the vertical alignment of your items.

Below is a detailed description of the alignment options available for both Horizontal and Vertical Alignment.

Horizontal Alignment

Opening the horizontal alignment drop-down list will give you the following options:

• Auto: Items are aligned the same way as the parent element.
• Start: Items are aligned towards the alignment container’s starting edge i.e. they’re aligned to the left.
• End: Items are aligned toward the ending edge of the alignment container i.e. they’re aligned to the right.
• Center: Items are aligned toward the center of the alignment container.
• Stretch: Items are stretched wide to occupy the entire alignment container while still being within its width constraints.

Vertical Alignment

Opening the vertical alignment drop-down list will give you the following options:

• Normal: For grid items, this behaves like Stretch alignment, except for alignment containers with an aspect ratio or intrinsic sizes where it behaves like Start.
• Start: Items are aligned towards the alignment container’s starting edge, i.e. they’re aligned to the top.
• End: Items are aligned toward the ending edge of the alignment container i.e. they’re aligned to the bottom.
• Center: Items are aligned toward the vertical center of the alignment container.
• Stretch: Items are stretched vertically to occupy the entire alignment container while still being within its height constraints.

Grid Controller Settings

To access the Grid Controller, click on the icon that’s beside Grid Tracks or click on the icon that’s on the top-right corner of the grid.

Column Settings

With the Grid Controller open, you’ll be able to access toggles to define the width of the rows and columns. These settings can be accessed by clicking on any one of the white buttons that’s above every row and column.

The following are the options available to you in Column Settings.

Width

Define how wide you want your column to be from here.

Min-Max Settings

• Intrinsic Dimension: The dimensions of a track (column) are based on the width of the content. Listed below are the options available for this feature:
  • Auto: Follows default settings. Track Width is based on the size of the container.
  • Min-Content: Track Width is automatically set as the same length as the widest bit of content.
  • Max-Content: Track Width is set so that all of its content can fit without it over-flowing the box or being wrapped.

Override Min-Max

Override min-max settings by defining the gap size (left) and the track width (right) from here.

Fit Content

Track Width is equal to the length of its content until it exceeds the given length in which case it will wrap the content to the next line instead.

Repeat

Use this option to duplicate tracks so that they’ll have the same style and width. 

Row Settings

In Row Settings, you’ll find the same options as you did for Column but for the Row Height:

Height

Define how tall you want your row to be from here.

Min-Max Settings

Click on this button to access the following row settings: 

• Intrinsic Dimension: The dimensions of a track (row) are based on the height of the content. Listed below are the options available for this feature:
  • Auto: Follows default settings. Track height is based on the size of the container.
  • Min-Content: Track height is automatically set as the same length as the widest bit of content.
  • Max-Content: Track height is set so that all of its content can fit without it over-flowing the box or being wrapped.

Override Min-Max

Override min-max settings by defining the gap size (left) and the row height (right) from here.

Fit Content

Track height is equal to the length of its content until it exceeds the given length in which case it will wrap the content to the next line instead.

Repeat

Use this option to duplicate tracks so that they’ll have the same style and height.

Other Settings

From the Grid Controller itself, you can quickly access the options to set the No. of Grid Tracks and the Gap Size for both Rows & Columns. You’ll also be able to delete the entire Grid from here by clicking on the Trash icon.

Adding Elements to a Grid

To add elements to a Grid:

1. Open the Elements Panel from the Topbar.
2. Drag and drop the desired element onto the Grid.
3. Elements are added from left to right for each row.
4. If space runs out in the Grid, dropping an element will automatically create space for it.

Grid Item Settings

To adjust settings for a specific Grid Item (child element of the Grid), select the Grid Item and go to Style Panel > Structure.

Click the Grid Items button to access the following settings:

Self Align

From Self Align, use the first drop-down to adjust the vertical alignment and the second to adjust the horizontal. These alignment options have already been explained above in the Place Items section.

Item Order

Next, define the order of the item in the sequence of elements using the Item Order option. 

Grid Items are counted from left to right for each row. Items with the lowest number are placed first while items with the highest number are placed last.

Placement: Span Grid Items Across Multiple Cells

Using Placement, you can get any Grid Item to span multiple columns, rows, or columns and rows. As Grid Placement is a line-based system, items are placed on the grid based on line numbers. For instance, a 3×3 grid consists of 4 column lines and 4 row lines.

You can define an item’s Placement in three different ways which are explained below:

• Explicit: In Explicit Placement, you can define the line numbers Row Start, Row End, Column Start, and Column End. Let’s take a look at our 3×3 grid as an example to explain this further.

Suppose you have an image in your 3×3 grid and you want it to occupy the entirety of the last column. You can do this by defining the following line numbers:

• Row Start > Specifies which row line to start the item: 1
• Row End > Specifies which row line to end the item: 4
• Column Start > Specifies which column line to start the item: 3
• Column End > Specifies which column line to end the item: 4

The resulting grid should end up looking like this:

• Implicit: In Implicit Placement, you can only define the line numbers Row End and Column End. Row Start and Column Start will be selected automatically by the grid.
• Area: In Grid Area, you can define a specific area and have your Grid Item occupy that area. This is explained in further detail in the next section.

Grid Area

Using the Grid Area property, you can assign a grid item to a specific area (i.e multiple cells) within the grid by referencing an area name.

To do this, start by defining a Grid Area by clicking on the plus icon inside any of the grid cells. This icon will be visible while you have your Grid Controller open. Do the same for other grid cells you want to include in the same area. 

📝 Note: All cells assigned to an area must have a grid line in common to work properly. If not, then that area is removed.

Next, select the element, and from the Style Panel, go to Structure > Grid Items > Placement > Area. From the dropdown here, select the area you just created. Now, your element will span across the multiple cells of a grid that make up this Grid Area. 

Using Layers to Rearrange Grid Elements

You can also easily rearrange your grid elements by going to the Layers tab from the Topbar.

On the Layers Panel, click on the Grid layer to collapse it. Then, click and drag the elements within to shuffle their order in the layer sequence thus altering their placement.

Explicit Grid vs Implicit Grid

• Explicit Grid: When you explicitly define the number of rows and columns, you create an Explicit Grid.
• Implicit Grid: If you add extra elements that cannot fit within the defined rows and columns, the Grid layout will automatically create additional rows or columns to accommodate them. This behavior characterizes an Implicit Grid, where the new rows or columns adjust their size based on the content of the added elements.

The behavior of the grid when adding extra elements that cannot fit within the defined rows and columns can vary based on the CSS properties and settings applied to the grid.