Grid layout settings
This topic explains how to configure components previously built with Content Editor. To learn about components built with Components instead, visit the Components documentation.
In the page builder, the grid layout settings affect the sizing and positioning of the component inside the chosen placeholder on the page.
The settings that appear under this header depend on which grid the site uses. By default, the grid layout is built on Bootstrap v5.0 and includes 12 columns.
The grid supports six responsive breakpoints based on screen width or the type of device selected in the editor view. This means you can control container and column sizing and behavior by each breakpoint with different sets of settings for extra small (smartphone screen), small, medium (tablet), large XL, and XLL grid layouts.
The layout grid configuration can be inherited from lower breakpoints, but it is possible to change it:
-
To choose a different Column Span configuration than the one inherited from a lower breakpoint, click Override inheritance. Changes you make to a layout will affect current and higher breakpoints.
-
To set the Column Span configuration back to the default values, click Reset to inherit size.
If you manually configure the number of columns for a component, we recommend that you check the layout for every device type that you use.
If you do not configure for larger sizes, the configuration for the closest smaller device size is used. For example, an unconfigured desktop uses the configuration from a tablet, if the size is specified for the tablet. If the tablet is unconfigured, the desktop uses the configuration for mobile instead.
You can also configure the following parameters:
-
Size - the size settings depend on the grid size displayed in the editor. Here are some of the common settings:
-
Use the scroll bar to manually configure the number of columns that the component can have as its width. If the scroll bar is not visible, click Overwrite.
-
Auto-fit to content makes the component as small as possible, depending on the content inside of it.
-
Auto-fill rows and columns automatically makes the component as wide as possible, depending on how many other components are placed in the same area.
-
-
Offset - moves content to the right. Use the scroll bar to indicate by how many columns the content should be offset.
-
Order - controls the visual order of the content when there are several elements in the same container.
-
Component alignment - defines how components should be placed relative to others.
-
Display - the display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as table or flex. Classes are combined for various effects.