Layout (Layer 4)

Layouts optionally allow the addition of columns to the overall page layout. Columns in CDS are based on a 12 column grid, where each column has no gutter and is equal width to other columns.

There are two main variations of columns in the CDS, both based off of CSS Flexbox. Both allow content to be positioned side-by-side in a left to right reading order.

Code

Proportional layout (Parent controls layout)

Important: If this is part of a sidebar region, then this layer will create a grid for the section contents automatically. The grid will be a 2x3 grid, with the following names. Proportional layout options are disabled.

Class Description
article One column, 3 row section on the left or right depending on the Region classes.
sidebar-priority Sidebar column, first row.
sidebar-secondary Sidebar column, second row.
. Sidebar column, unused third row which occupies the remaining height of the container 
<div class="layout {proportional-layout-option}">
    <!-- Section content -->
    ...
</div>

Grid layout (Children control layout)

<div class="flex-grid">
    <div class="{grid-flex-option}">
        <!-- Section content -->
    </div>
    <div class="{grid-flex-option}">
        <!-- Section content -->
    </div>
    ...
</div>

Classes

{proportional-layout-option}

Changes the column layout.

Proportional layout only. These will only work if the class layout is applied to the element. Use this option when you want the parent element to control the layout for all children.

If your layout element is within a sidebar region, it will have an explicit 66.67%, 33.33% split. None of the options below will override.

Class Column Proportion
Default (no class)
100%
.layout-4-1
80%
20%
.layout-3-1
75%
25%
.layout-2-1
66.67%
33.33%
.layout-3-2
60%
40%
.layout-1-1
50%
50%
.layout-2-1-1
50%
25%
25%
.layout-2-3
40%
60%
.layout-1-2
33.33%
66.67%
.layout-1-1-1
33.33%
33.33%
33.33%
.layout-1-3
25%
75%
.layout-1-2-1
25%
50%
25%
.layout-1-1-2
25%
25%
50%
.layout-1-1-1-1
25%
25%
25%
25%
.layout-1-4
20%
80%

Note: CDS also supports other 2 column grid proportions based on a 12 grid system such as 43%-57% (.layout-5-7).

{grid-flex-option}

Used on a child element, this defines the width of the flexible grid item.

Grid layout only. These will only work if the class flex-grid is applied to the parent. This option is used when you want the child elements to control the size of the columns.

Using Grid layout presumes that you will be explicitly declaring each value for each child element. It is possible for grid rows to not span 100% width if the values do not add to 100%.

If there is overflow (a row with over 100% width) the last element(s) will reflow to the next row and take up the declared space, aligned to the left.

Class Column Width
.flex-1 1/12 (8.33%)
.flex-1-8 1/8 (12.5%)
.flex-2 2/12 (16.67%)
.flex-1-5 1/5 (20%)
.flex-3 3/12 (25%)
.flex-4 4/12 (33.33%)
.flex-5 5/12 (41.67%)
.flex-6 6/12 (50%)
.flex-7 7/12 (58.33%)
.flex-8 8/12 (66.67%)
.flex-9 9/12 (75%)
.flex-10 10/12 (83.33%)
.flex-11 11/12 (91.67%)

Accessibility Expectations

Modality Expected Behavior (All states) Criterion
Screen Reader Text or images must not be positioned using the grid system in such a manner where their position relative to each other conveys important information without that relationship being explained in text. 1.3.2

Developer Notes

If you need to incorporate a layout that does not match any of these options, you will have to create it manually within each project.

If you need to create gaps between contents, you can also optionally add a gap in the project’s CSS to this layer of the page structure.