Overview
The .ds-cols class (previously .ds-layout__cols) provides generic column layouts with options to align child columns.
The ds-cols class applied to a container element causes the containers child elements to display as a column, with a gutter between each column. Each column will be as narrow as the content allows, or the width based on the columns ds-span class if set.
Options
Basic usage
The content will display inside the ds-cols element as columns. The width of the columns will be based on the width of the content in that column. If the content in the columns causes it to be full width, the columns will wrap onto new rows.
You can force the size of the columns by either, setting column widths, or using nowrap.
<div class="ds-cols">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Column width
ds-cols has a 12 column grid. Setting the widths of child elements to a value between 1–12 allows you to create columns of specific sizes.
Setting the width on each column
If a direct child element of ds-cols has a class of .ds-span --X where X is a value between 1-12 that child element will display at that width. Child elements without a width defined will automatically adjust to fit the column content.
<div class="ds-cols">
<div class="ds-span --6">Content 1</div>
<div class="ds-span --2">Content 2</div>
<div class="ds-span --4">Content 3</div>
</div>Example with only one column width defined
<div class="ds-cols">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>Setting the width for all columns
Adding a class --X where X is a value between 1-12 directly to the ds-cols element will force all child items to use that column width.
<!-- Each column to span 4 (of 12 columns) -->
<div class="ds-cols --4">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
<!-- Each column to span 3 (of 12 columns) -->
<div class="ds-cols --3">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Align
End
Aligns all columns at the end
<div class="ds-cols --end">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Example with one column width defined
<div class="ds-cols --end">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>End reverse
Aligns all columns at the end, and reverses the order
<div class="ds-cols --reverse">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Example with one column width defined
<div class="ds-cols --reverse">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>Center
Aligns all columns at the center
<div class="ds-cols --center">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Example with one column width defined
<div class="ds-cols --center">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>Spaced
Distributes space between columns
<div class="ds-cols --spaced">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Distributed
Distributes space around columns
<div class="ds-cols --distributed">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Example with one column width defined
<div class="ds-cols --distributed">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>Child to end
Adding ds-span --end to a child item will force that column and subsequent columns to align at the end.
Aligning the last item at the end
<div class="ds-cols">
<div>Content 1</div>
<div>Content 2</div>
<div class="ds-span --end">Content 3</div>
</div>Aligning the second item onwards at the end
<div class="ds-cols">
<div>Content 1</div>
<div class="ds-span --end">Content 2</div>
<div>Content 3</div>
</div>Expand
Stretch
Stretches all columns to fit, columns will still wrap onto a new row if needed.
<div class="ds-cols --stretch">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Example with one column width defined
<div class="ds-cols --stretch">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>Example with content of different widths which wrap
<div class="ds-cols --stretch">
<div>Content 1</div>
<div>Content 2</div>
<div>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>Expand child
Adding ds-span --expand to a child item will force that column to expand to take up any space.
Expanding the first child
<div class="ds-cols">
<div class="ds-span --expand">Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Expanding the first and last child
<div class="ds-cols">
<div class="ds-span --expand">Content 1</div>
<div>Content 2</div>
<div class="ds-span --expand">Content 3</div>
</div>Size
Smaller column gap
<div class="ds-cols --small">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>No wrap
--no-wrap will prevent columns wrapping onto a new line.
With --no-wrap
<div class="ds-cols --no-wrap">
<div>Content 1</div>
<div>Content 2</div>
<div>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>Responsive support
Resize the examples below to see how the component is responsive.
<div class="ds-cols --responsive-sm">
<div>Content</div>
<div>Content</div>
<div>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div><div class="ds-cols --responsive-md">
<div>Content</div>
<div>Content</div>
<div>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>