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

Video about hierarchy on Editor X, and how the parenting model influences how elements interact with each other across all breakpoints

Dive into the concept of element hierarchy and parenting on Editor X.

Play icon
Video tutorial about how to structure a site on Editor X using pages, sections, containers and more

Learn how to structure a website using pages, sections and containers.

Play icon
Video tutorial about layout tools on Editor X that use Flexbox technology

Get to know where you control size, position and behavior of all elements.

Play icon
Video tutorial about breakpoints on Editor X

Learn how to edit element style, position and behavior at every viewport width.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Green background showing grid with 4 columns and 2 rows on it. In the middle of the grid are three tubular shapes stacked.

LESSONS & EXERCISES

Grid

Learn how to take precise control over the positioning of elements using grid.

Blue background showing grid editing with grid outline covering it. There is a small icon in the middle of the image.

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.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

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 introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

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.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.