Grid.

Let’s explore how to create responsive layouts using grid on Editor X.

Grid is an advanced layouting tool that lets you precisely position elements within a 2-dimensional framework of columns and rows. 

Using grid, you can create intricate, responsive designs that look exactly the way you want across screen sizes.

On Editor X, each section and container you add automatically has a 1X1 grid. That means this section contains one grid cell, and when we place an element its position is relative to the entire section.

If we want more control over the position of each element in our design, we can adjust the grid. We can choose from these preset layouts, or create a custom one.

With this 2x2 grid, the section is divided into 4 grid cells. We can drag the element to position it exactly where we want, and it automatically docks to the nearest grid lines.

Now the element’s position is relative to the grid cell it’s in.

We can stretch the image to fill the entire grid cell or multiple grid cells.

Another way to position elements within the grid is from the Inspector panel. With the element selected, you can choose which grid cell to position it in by clicking the corresponding cell in the inspector.

Position elements across multiple grid cells by holding down shift and selecting the grid cells in the Inspector. Notice how the row numbers update according to the element’s position.

To toggle the Grid Measurements on or off, you can go to View. When it’s toggled on, you can see the measurements next to each row and column.

We can add any more content we need to the section, and position it in the grid.

Now let’s see how to edit the size of the grid’s columns and rows. We’ll click on the measurements next to the column or row we want to adjust, and resize from here in the Inspector panel.

Grid offers a variety of custom units, so you can measure your space the way you want. Check out our lesson on measurements to learn more about the different sizing options on Editor X.

Here we’re using fr, a fractional sizing unit. 1fr represents a fraction of the space available. We’ll set one column to 2fr, so it takes up two-thirds of the available space and is twice as big as the other column.

From here you can also change the grid layout, and create gaps in between cells.

If you click this plus icon you can add a new column to the right side of the grid. Or, you can decide where to place it by clicking the 3 dots next to an existing column and choosing which side to add it to.

You can also delete columns or rows from here as well.

Another way to resize rows and columns is by dragging the gridlines. Notice how changing the grid layout this way affects the content inside it.

To customize the grid on the canvas without affecting the content inside the cells, we’ll click customize grid on canvas. With this mode on, we can edit the gridlines while the content size and positioning stay the same.

We can also add grid lines by dragging from the top and left. This still won’t affect the size and position of existing content.

Delete grid lines by dragging them off or right-clicking and choosing “delete grid line”.

You can use the grid in containers as well as sections.

For example, we want to add 2 images side-by-side in this container. So it’s a good idea to apply a 2x1 grid to the container, and add an image in each cell.

We’ll add a gap between these cells from the Inspector so these two images keep a space between them.

We have the freedom to adjust the grid to create a unique layout at each breakpoint. Right now, the properties we have on mobile are the same ones we set on the desktop breakpoint. Let’s optimize this layout for mobile.

First, we’ll change the grid layout to 1x4.

Now we can make more customizations, like deleting unnecessary rows and adjusting their heights. We’ll reposition elements in different grid cells to look perfect on smaller screens.

Notice that these changes aren’t affecting the larger breakpoints. That’s because of the cascading rule; design and layout changes at smaller breakpoints won’t affect bigger ones, but content or data changes like editing text, or deleting an element, will affect all breakpoints.

As we resize the screen, the elements maintain their positions and are responsive according to our grid properties.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.