Skip to content
MENU

Soracom

Design System

Cols

A generic container for column layout

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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- 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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-cols --spaced">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
Example with one column width defined
<div class="ds-cols --spaced">
  <div>Content 1</div>
  <div class="ds-span --6">Content 2</div>
  <div>Content 3</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-cols --spaced">
  <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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>