Grid.
Design intricate layouts using CSS grid. See how to apply a grid, dock elements to gridlines and edit the grid with custom units.
Design intricate layouts using CSS grid. See how to apply a grid, dock elements to gridlines and edit the grid with custom units.
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.
NEXT VIDEOS
Did you find this resource helpful?
Thank you for your feedback!
Related learning resources.

LESSONS & EXERCISES
Grid
Learn how to take precise control over the positioning of elements using grid.

LESSONS & EXERCISES
Editing the Grid
Get to know how to customize grids using different units of measure.

VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶

LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶

Ready to start creating?

Top searches
People are searching for
VIDEO LIBRARY
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
VIDEO LIBRARY
Getting Started
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.