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 

<div class="ds-cols">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
Content 1
Content 2
Content 3
<div class="ds-cols">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>

Column width 

If a direct child element of ds-cols has a class of .ds-span--X where X is a value betwen 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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<div class="ds-cols">
  <div>Content 1</div>
  <div class="ds-span--6">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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<div class="ds-cols--end">
  <div>Content 1</div>
  <div class="ds-span--6">Content 2</div>
  <div>Content 3</div>
</div>

Align 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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<div class="ds-cols--center">
  <div>Content 1</div>
  <div class="ds-span--6">Content 2</div>
  <div>Content 3</div>
</div>

Stretch 

Stretches all columns to fit
<div class="ds-cols--stretch">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<div class="ds-cols--stretch">
  <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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<div class="ds-cols--spaced">
  <div>Content 1</div>
  <div class="ds-span--6">Content 2</div>
  <div>Content 3</div>
</div>

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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<div class="ds-cols--reverse">
  <div>Content 1</div>
  <div class="ds-span--6">Content 2</div>
  <div>Content 3</div>
</div>

Align 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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<div class="ds-cols">
  <div>Content 1</div>
  <div class="ds-span--end">Content 2</div>
  <div>Content 3</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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
<div class="ds-cols--small">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>

No wrap 

ds-cols--nowrap will still allow columns to wrap for mobile devices, but will prevent column content forcing the columns to wrap by default.

<div class="ds-cols--nowrap">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
Content 1
Content 2
Content 3
<div class="ds-cols--nowrap">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>