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

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

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
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
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.

See all results ▶