Grid Layout

The CSS Grid property allows you to create a grid consisting of rows and columns. Grid enables the creation of complex layouts and makes it easy to control the positioning of elements within the grid.

Grid allows you to set the following parameters:

Flex allows you to automatically arrange child elements within a parent block in one direction—either horizontally or vertically.

Grid allows you to arrange child elements within a parent block along two axes — by rows and by columns.

When it's preferable to use Flex

Flex is more convenient to use when you have a single block where elements need to be distributed along one axis—in a single row or column. For example, this could be a menu. In such cases, Flex makes it easier to distribute elements with the desired spacing.

When it's preferable to use Grid

Grid is more convenient to use when you have a complex grid where some elements span multiple rows or columns. With Flex, such a grid would require a lot of extra wrappers.

You can create nesting in the grid - any cell of the grid can be made a grid. Nesting can be unlimited, allowing you to create complex layouts.

On the Design tab of the right panel, in the Auto Layout section, select Display - Grid by clicking on the corresponding icon.

Next, set the desired number of columns and rows in the grid.

Specifies the direction of cell placement in the grid — by rows or by columns:

They set the alignment of cell content horizontally and vertically.

Justify:

Align:

They set the alignment of columns and rows in the grid.

Sets the spacing/distance between rows and columns in the grid.

Spacing/distance can be set using the following units: px, em, rem, %, vw, vh.

Allows filling empty cells in the grid. With the Dense option enabled, the nearest fitting (by size) element moves into the empty space, and the other elements are shifted to the end.

This can be useful for complex grids and when displaying dynamic data in a grid.

To enable the Dense option, click on the corresponding icon.

To open the cell size editing mode, click the "Edit Grid" button.

In the opened "Grid Settings" panel, you can set the sizes of columns and rows.

You can use not only standard units of measurement (px, %, em, etc.) for setting sizes, but also special units for grids — fraction (fr).

Fraction (fr) is a relative unit of measurement that indicates what portion (share) of the grid a cell occupies in width or height. When you set a size in "fr", the system calculates the element's share of the grid based on the number and sizes of other elements in the row or column.

For example, if you have four columns and each is set to a width of 1 fr, then they will each occupy an equal portion of the grid.  

If one column is set to a width of 2 fr, it will be twice as wide as the others.

Fraction values can be decimals, not just whole numbers. For example, you can set a value of 0.25fr. 

How do fractions differ from percentages?

If you set the column width as a percentage, then when you delete or add columns, you will have to change the width values for each of them. For example, if there were four columns at 25% each and one is removed, the width of the columns won't change, leaving empty space. 

If you use fractions, the column widths will automatically adjust to fill the entire row. So if you remove a column, the remaining columns will take up the whole space without needing to change their widths. 

These settings are used to flexibly adjust cell sizes based on screen width. They allow for quick adaptation of the grid for different devices. 

To set these options, open the size settings for the column by clicking the appropriate icon.

Then, in the panel that opens, go to the Min/Max tab and set the desired values.

Parameters:

How it works in practice:

For example, set the column to: minimum size 200px, maximum size 1fr, and auto-fit.

1. The system places as many cells as possible in the row at a width of 200px each. 

2. If there is empty space left in the row, the system increases the cell widths to the maximum possible, distributing them evenly across the row width.

Thus, on a wide screen, the row will fit four cells at 200px each. As the screen size decreases and four cells no longer fit, the grid will adjust to three columns, then two. On the smallest screens, the cells will stack in one column. At any screen width, the cells will evenly stretch to fill the entire row.

These settings allow you to specify the number of columns and rows a cell occupies, as well as adjust its positioning in the grid.

To configure grid cell parameters, select the desired cell within the grid. The Grid Cell settings will appear on the right panel.

This option lets you configure a cell to span multiple columns or rows.

Parameters:

For example, let's the parameters for cell 1: Columns — 2 and Rows — 2. For cell 6: Columns — 1 and Rows — 2.

In this case, the grid will look like this:

Each cell can have its justify and align settings configured individually:

For example, if you set cell 5 to a width of 50% and justify it to the center, it will be positioned in the middle of the cell.

By default, a cell is set to Auto position. This option means the element will automatically occupy the available space after the previous cell.

How to change the cell position in the grid

To change a cell's position in the grid, you can rearrange it in the HTML structure by moving it in the layers or on the canvas. For example, you can move cell 2 after cell 3 - their position in layers will change. 

This method isn't ideal because it changes the document structure.

Another way to change positioning is by configuring the cell's position in the grid Manually. Using this setting to change cell position, its placement in layers will not change.

To switch to Manual settings mode, switch the corresponding tab in the cell settings.

In this mode, the following parameters are available:

To understand how these parameters work, let's explore the concept of grid lines.

Grid lines

All grid cells are defined by the intersection of grid lines. There are horizontal and vertical grid lines, positioned on both sides of a column or row. 

There is always one more grid line than there are columns or rows. In this example, there are three columns formed by four vertical grid lines and two rows formed by three horizontal grid lines.

When manually configuring a cell's position, you need to specify:

Example 1. For cell 2, let us set the parameters as follows: Column Start/End: 1 and 2, Row Start/End: 1 and 2. This positions the cell between the specified grid lines.

Cell 2 will move to the position of cell 1. However, in the layers, it will still be listed after cell 1.

Example 2. Let's place cell 9 after cell 2 by the width of two columns. To do this, we need to set the following parameters: Column Start/End — 2 and 4, Row Start/End — 1 and 2.

Example 3. Let's assign cells 2 and 9 the same parameters:

Column Start/End: 1 and 2, Row Start/End: 1 and 2. To prevent overlap, set both to 50% width and align cell 9 to the right. Both cells will then occupy the first grid cell.

Advantages of manual positioning in the grid compared to absolute positioning of elements (position absolute):