Grid control component
The grid control component is used to lay out the content area into different column combinations. Content components are then placed into the resulting cells.
Grid control - combinations
XL viewport
XL viewport
L viewport
L viewport
M viewport
M viewport
S viewport
S viewport
XS viewport
XS viewport
Grid control with 'Airy spacing'
Example 4 columns
Normal grid
Normal grid
Airy space left
Airy space left
Airy space right
Airy space right
Airy space left and right
Airy space left and right
How it works
How it works
- All grid combinations are based on the underlying ‘scheme’ of 24 columns (12 columns in Extra Small).
- There is a number of defined column combinations available. Additional combinations may be introduced sporadically.
- There are no fixed design templates: to create a structure for your page layout you define a suitable combination of column using the grid-control component.
- Extra space on both sides of grid column can be configured
- Content components (text, images, teasers etc.) are nested inside the cells of the grid control.
- Airy spacing
The airy spacing is a way to add empty space to the right or left of each column in a grid control. When used consider that you will have less space for the content. Technically speaking it will add 1/24th of the page width to each column. It is ignored in S and XS viewport.
How to use it
How to use it
- Carefully plan the details of your content and how it is arranged in columns.
- Keep in mind that the columns behave differently depending on the screen size.
- Make sure you double-check how content rearranges across viewports.
Reference for publisher
Grid control - top level component in authoring mode.
Grid control - inner component in authoring mode.
Note
In some cases content or components are connected with other content or components. In that case it might be helpful to use the inner grid control component:
