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><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
<div class="ds-cols --end">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div><div class="ds-cols --end">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>End reverse
<div class="ds-cols --reverse">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div><div class="ds-cols --reverse">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>Center
<div class="ds-cols --center">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div><div class="ds-cols --center">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div>Spaced
<div class="ds-cols --spaced">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Distributed
<div class="ds-cols --distributed">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div><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.
<div class="ds-cols">
<div>Content 1</div>
<div>Content 2</div>
<div class="ds-span --end">Content 3</div>
</div><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><div class="ds-cols --stretch">
<div>Content 1</div>
<div class="ds-span --6">Content 2</div>
<div>Content 3</div>
</div><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.
<div class="ds-cols">
<div class="ds-span --expand">Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div><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.
<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>