Grid

Grid is an advanced layouting tool that lets you precisely position elements within a 2-dimensional framework of columns and rows. You can adjust the grid in any section or container, and rearrange the layout at each breakpoint to achieve intricate, responsive designs that look great on any screen size.

Adjusting the grid layout

Each section and container you add has a 1x1 grid by default. To change the layout, select the section or container and from the floating menu choose a preset layout or create a custom grid. You can also adjust the grid layout from the Inspector panel under Display.

A blank section in the editor with a 1 by 1 grid. The dropdown in the floating menu is open to show preset grid layout options.

Adjusting the grid from the Inspector panel

Under Display in the Inspector panel, use the plus icons to add a column to the right or row to the bottom of your grid.

Click the dropdown arrows to adjust the column and row measurements. Each one has 3 dots next to it where you can delete the row or column, or add a new one on either side.

You can also set gaps between rows or columns.

Note: Changes you make to the grid from the Inspector panel affect the size and positioning of the content inside..

A section in the editor with a 2 by 2 grid applied so there are 4 cells. The Inspector panel is open showing the different adjustments you can make to the grid

Adjusting the grid on the canvas

From the floating action menu, choose Customize grid on canvas. Changes you make in this mode don’t affect the content in the grid.

In this mode you can drag to adjust existing grid lines, or drag from the left or top to add new ones.

Click Done when you’re finished editing.

The design looks slightly opaque to indicate that the mode to let you customize a grid on the canvas is on. There are prompts to drag gridlines to customize the grid and that doing so won’t affect the content

Docking

When you add an element to a grid cell, it automatically docks to the nearest vertical and horizontal gridlines.

Dock elements to control their position and prevent overlap at smaller screen sizes. Learn more about docking and margins here.

A design with text in the top left of a 2 by 2 grid. The text is selected and there are dotted lines connecting to the grid lines to the right and below the text, indicating that it is docked

Stretching across cells

Stretch elements such as images and containers across one or more grid cells to fill an entire area.

In a design with a 2-by-2 grid, there is an image placed on the right that has a grid line splitting it in half so that it is located in two cells. There is an icon over the top right of the image that indicates the image can be stretched to fill both grid cells

Positioning elements

You can drag and drop, or position elements using the Inspector panel under Location in grid cells.

Select the element you want to position. You can see which grid cell it’s placed in, and click on the box that corresponds with the cell you want to move it to. Position elements in more than one cell by holding down shift while you select the cells.

You’ll see the column and row numbers update according to the element’s new position.

A design with a 2 by 2 grid. An image in the bottom left is selected, and the Inspector panel is open to indicate where you can change the element’s location in the grid cells

Grid measurements

Go to View to toggle the Grid Measurements on or off. When they’re toggled on, you can see the measurements next to each row and column. Click the measurements to adjust them. Between the grid measurements, you can click on the plus icons to add additional rows and columns.

Grid offers different units of measurement that affect how your content responds to changes in viewport width. Learn more about measurements here.

A design open in the editor. In the top bar of the editor, the View option is highlighted and you can see in the dropdown where to select the Grid Measurements option. There’s a check mark next to it to indicate this option is switched on

Follow these steps in the editor

Open exercise template →

Apply a gap. Apply a grid of 2x2 to the first section. Then add a horizontal gap of 40px.
Set min/max. Select the 1st row and set its size to be min(500px) and max(content). Select the second row and set its size to min(300px) and max(content).
Add and place images. Drag the image and put it in the 1st column of the grid. It will cover both rows. From the inspector panel, you’ll see it spans a grid area of 1-3 rows. Stretch the image.
Add a second image. Drag it and put it in the 2nd column of the grid. It will cover both rows, which means its row grid area spans from 1-3. Stretch the image.
Add a container. Drag in a container and place it over the 2nd row and the 2nd column. Its grid area row and column spans over 2-3. Stretch it.
Change the grid at another breakpoint. Click on tablet view. Add another grid row at the top of the grid. Set the row to min(500px) and max(content). Add a vertical gap of 40px.
Move elements around. Unstretch the 1st image, and place it in the 1st row - set its grid area to be columns 1-3 and rows 1-2. Move the 2nd image to cover the 2 last rows. Its grid area will be columns 1-3 and rows 2-4. Unstretch the 2nd image. Move the container, place it in the last row. Its grid area will be columns 1-3 and rows 3-4.

Transcript

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 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.