Studio Editor: Choosing Between Flexbox-Based and Grid-Based Tools

The Studio Editor offers powerful layout tools to organize elements, each tailored to specific design needs. These tools are based on two common CSS technologies—Grid and Flexbox—and understanding this distinction can help you plan the best responsive layouts to showcase your client's content. 

In this article, we’ll break down the layout tools by type, explain their key capabilities, and help you decide which is best for your needs.

Grids are a two-dimensional CSS model that uses rows and columns to arrange elements within predefined cells. They’re particularly powerful for creating responsive, modular layouts with precise control.

Blank sections come with a built-in grid, containing a single cell (housing the entire section). Split the grid into more cells as needed to give a responsive structure to the content. After deciding on your layout for desktop, you can choose a different one for smaller breakpoints.

An advanced CSS grid offers complete freedom to create intricate layouts in section grids, containers, lightboxes, flexboxes and repeater items. You can set the exact size of every cell, on every breakpoint, using responsive measurements (e.g. fr, Min/max, %). 

Best for: Complex layouts requiring pixel-perfect adjustments.

A container is a simple yet essential layout tool. When you attach elements to the container box, it automatically becomes their parent element and defines their structure. 

Best for: Standalone, isolated layouts inside sections. 

Flexbox is a one-dimensional CSS model optimized for layouts where elements need to dynamically adjust within a parent container. With flexbox tools, elements "flex" seamlessly to fit the allocated space, whether expanding, shrinking, or wrapping.

A stack is an invisible flex container that ensures the elements' vertical or horizontal alignment.  Stacking keeps the margins between elements intact and prevents elements from overlapping on smaller screens.

Additionally, you can set the order of the stack elements per breakpoint to ensure the layout looks polished across all screen sizes. 

Best for: Standalone, isolated layouts within a section, where elements need precise alignment along a single horizontal or vertical axis. 

A flexbox is a ready-made flex layout where the items automatically wrap to fit every screen. It's made up of responsive containers, with various display types to suit your specific content (e.g. Mosaic, Slider, Columns). 

You can choose a different display type for each viewport (e.g. slider layouts work great for mobile devices) and set a specific item order as well.

Best for: Organizing a large volume of content in a neat, convenient layout. 

A repeater is a list of items that have the same design and layout, but different content in each. The layout and design adjustments are automatic so you never have to worry about cohesiveness. 

What makes repeaters truly unique is the ability to connect them to your content collections. This allows you to manage and update the content from the back-end without affecting the actual design, making them the ultimate data-driven layout tool. 

Best for: Lists, or any type of content that you want to split into items that look perfectly cohesive.

Before selecting one of our tools, plan the desired layout you want for each screen size. Then, you can choose a layout tool that includes the abilities you need. 

Each layout tool is designed to accommodate different amounts and types of content. For example, a container works well for smaller, focused content, while a large section grid is better suited for organizing complex layouts. 

Similarly, while both flexboxes and repeaters are excellent for presenting large volumes of content in an organized way, they serve distinct purposes. Repeaters streamline consistency by applying the same layout and design across all items, whereas flexboxes give you the freedom to design each item individually.

Flexbox and grid elements are different in the way the content adjusts to different screen sizes. Grids show a different number of rows and columns to fit smaller screens; In flexbox-based tools, the content automatically wraps and / or reorders to fit the visitor's screen.

Only repeaters support this option, so choose this tool if you need to show content from CMS collections. 

Alternatively, you can connect specific elements (e.g. text, image) to the collection and add them to a container or stack to keep the layout organized.