Studio Editor: About Cells and Grids

3 min read
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.
A GIF hovering over cells in a section to show the layout

Section grid

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.
A GIF showing the drop-down with available grid layouts for a section
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.
A GIF showing how to drag the grid lines on the canvas

Advanced CSS grid

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.
A screenshot of the Layout section in the Inspector after applying an advanced grid
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.
A screenshot showing the Inspector panel when the option to apply advanced grid is available

Frequently asked questions (FAQs)

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

Did this help?

|