flexbox
Grid-based elements in the Studio Editor
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.
The following elements are based on a CSS grid:
-
Section Grid
Best for: Simple 2 dimensional layouts. -
Advanced CSS Grid
Best for: Complex layouts requiring pixel-perfect adjustments. -
Containers
Best for: Standalone, isolated layouts inside sections.
Flexbox-based elements in the Studio Editor
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.
The following elements are based on flexbox:
-
Stack
Best for: Standalone, isolated layouts within a section, where elements need precise alignment along a single horizontal or vertical axis. -
Repeater
Best for: Lists, or any type of content that you want to split into items that repeat the design. -
Flexbox
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.
Flexbox
vs Grid
Flexbox Wrap: On or Off
On Mosaic and Brick layouts you will see the wrap behavior on the items of the flexbox. This means the flex items will all try to fit onto one line. When one of the items doesn't fit it will automatically shift to the next line and wrap according to need.
Flexbox Direction: Horizontal or Vertical
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
Flexbox
Properties
Flexbox Layout:
Columns
In a Flexbox column layout, items are arranged horizontally in a single row. All columns maintain the same height, ensuring a consistent and aligned design. You can choose to keep column widths equal across all items or let them adjust automatically based on their content. For right-to-left (RTL) languages, you can easily switch the direction of the columns with a single click.
Common Use Cases:
Different width columns