Editor X: Using Grids

8 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
CSS grids are a great way to ensure your elements are organized in a structured manner. In Editor X, every container and section comes with a built-in grid. You can choose the number of rows and columns your composition requires, and adjust their size in many different measurements. 
In this article, learn all about working with Grids in Editor X:
Want to learn more?
Check out our lesson on grids in the Editor X academy. 

Adjusting an existing grid

Every section and container comes with a built-in 1x1 grid that you can adjust. Switch to a different layout in one click, or create your own grid by dragging the lines over your existing composition. 

To adjust the grid:

  1. Click the relevant container or page section.
  2. Change the grid in one of the following ways:
Tip:
You can also add a section with a built-in grid, by clicking the Add Section icon .


Managing a grid from the Inspector panel

Customize your grid to get the exact layout you want. You can change the number of rows and columns, adjust their size and the gaps between them.

To manage a grid:

  1. Click the relevant grid.
  2. Click the Inspector icon  at the top of Editor X.
  3. Click the Layout tab  and scroll down to Display.
  4. Choose what you want to do:
    • Choose a different layout: Click the Layout drop-down to select a different look that contains the same number of cells as the existing grid.
    • Adjust your grid manually: Click below to learn how to:
Working with breakpoints:
When designing a grid, it only appears on the specific breakpoint you're working on. You should create a grid for each and every screen size to ensure the composition of your elements is flawless. 

Positioning elements in a grid

While adding elements and placing them on your grid, there are various tools to help you create a responsive layout:

Docking elements

Docking elements to the gridlines ensures they're positioned exactly as you want. When you add an element to a grid cell, it's automatically docked to the closest vertical and horizontal gridlines. You can adjust the docking as needed from the Inspector panel. 

Move elements to a different grid cell

Under the Position section in the Inspector, you can select an element and see the grid cell(s) it's positioned in. Click any grid cell to move the element there, without having to use drag-and-drop. 

Stretching elements to fill a grid cell

Stretch elements to fill a grid cell in just a click. If an element is positioned over the gridlines of more than one cell, it is stretched over all the cells it is located in.

Table of grid units

Use the whole range of CSS units to create your grid. You can set the size of the columns and rows using percentages, pixels or fractions. You can also set the minimum and maximum size of the columns and rows, and even use calculations to create the grid you require. 
Note:
You can set the size of your rows and columns in different units. By default, the units for rows are in pixels, and the units for columns are in fractions (fr). 
Unit
Unit Type
Explanation
Fraction (fr)
Fluid
Set the size of your columns/rows to be a fraction of the size of the page section/container. E.g. in a grid of 2 columns, if the left column is set to 2fr, and the right one is set to 1fr, the left column will take up 2/3 of the section/container.
Auto
Fluid
The height and width of the rows and columns are automatically set to fit the content inside them.
Percentage (%)
Fluid
Set the size of your columns/rows to be a percentage of the section/container.
Pixels (px)
Fixed
Set the size of your columns/rows to be a fixed number of screen pixels of the section/container. 1px = 1/96th of 1inch.
Viewport Width (vw)
Viewport
Set the size of your columns/rows to be a percentage of the of the width of the viewport (the browser window size). E.g. if the viewport is 50cm wide, 1vw = 0.5cm.
Viewport Height (vh)
Viewport
Set the size of your columns/rows to be a percentage of the height of the viewport (the browser window size). E.g. if the viewport is 50cm high, 1vh = 0.5cm.
Min/Max
Other
Set the size of your columns/rows to a minimum and maximum measurement. You can choose from any of the grid units when using the option.
Min Content
Other
Set the size of your columns/rows to never get smaller than this minimum content. 
Max Content
Other
Set the size of your columns/rows to never get larger than this maximum content.
Calculation
Other
Create a calculation using any of the grid units to set the size of the columns/rows.

Did this help?

|