Studio Editor: About Cells and Grids

Grids are a powerful tool when it comes to responsive design. The grid is made up of cells, and each element, or group of elements, gets its own cell. This keeps your layout in place on every screen size, ensuring that elements don't overlap. 

You can add cells to organize a section, or apply an advanced CSS grid for more precise control. The CSS grid is also available for elements like containers and repeater items which cannot be split into cells.

In the Studio Editor, sections come with a built-in grid, containing a single cell (housing the entire section). Split the section layout into more cells to give a responsive structure to the content. There are various customizable layouts to choose from.

After choosing the relevant layout, refine it to your needs by adding new cells or splitting existing ones. To adjust the size of each cell, just drag the grid lines on the canvas.

Need more precise control of the section grid? Switch to an advanced CSS grid to adjust the rows, columns and their size with advanced measurements (e.g. fr, Min/max, %). You can tailor these settings per breakpoint so the grid makes sense on every screen size.

Apply an advanced CSS grid on an entire section, or just a specific cell. It's also a way to add a grid to elements other than sections, like a container or a repeater item. If the option is available, you can find it under the Layout section in the Inspector panel.

Click a question below to learn more about grids in the Studio Editor.