Soracom

Design System
  1. Home
  2. Design system
  3. Containers
  4. Cols

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.

html
Copy
<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.

html
Copy
<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

html
Copy
<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.

html
Copy
<!-- 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

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

Example with one column width defined

html
Copy
<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

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

Example with one column width defined

html
Copy
<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

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

Example with one column width defined

html
Copy
<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

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

Distributed

Distributes space around columns

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

Example with one column width defined

html
Copy
<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

html
Copy
<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

html
Copy
<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.

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

Example with one column width defined

html
Copy
<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

html
Copy
<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

html
Copy
<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

html
Copy
<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

html
Copy
<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

html
Copy
<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.

html
Copy
<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>
html
Copy
<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>