Grid.

Let’s explore how to create responsive layouts using CSS grid on Editor X. CSS grid is an advanced layouting tool that lets you precisely position elements within a 2-dimensional framework.

Click on any section of your site to Apply a Grid.

There are a few preset grid layouts to choose from—or you can create your own custom grid. Here, let’s choose 2 by 2.

You can dock elements to any part of the grid. As you can see, the text automatically docks to the nearest gridlines.

And from the Inspector panel, you can manually adjust which sides of your elements are docked.

When you add an image to a grid, click the icon in the corner to stretch your image to fill one, or multiple grid cells.

Click Edit Grid to change its dimensions and adjust the relationship between the columns and rows.

To add a new column, click the plus icon here. Drag the column handles to change each column size by hand, or click on the column measurement to change it manually.

Grid offers a variety of custom units, so you can measure your space the way you want.

You can apply a grid to sections—as you just saw, and you can also apply a grid to other elements, like this container box.

Let’s add a few images, dock them to different grid cells, and stretch them to full cell width.

To add gaps between your grid cells click Edit Grid and choose how much space you want.

Now, the images maintain a nice gap between them.

Designing with grid gives you precise control over your layout at every viewport.

Let’s redesign the site for mobile. First, let’s edit the grid. Delete 1 column, and 1 row.

Now rearrange the elements, so each part of the design is optimized for smaller screens.

CSS grid gives you the freedom to create a unique site design for every device.

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