Cols

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

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

Example with only one column width defined

html

Copy

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

Horizontal Alignment

End

Aligns all columns at the end

html

Copy

Example with one column width defined

html

Copy

End reverse

Aligns all columns at the end, and reverses the order

html

Copy

Example with one column width defined

html

Copy

Center

Aligns all columns at the center

html

Copy

Example with one column width defined

html

Copy

Spaced

Distributes space between columns

html

Copy

Distributed

Distributes space around columns

html

Copy

Example with one column width defined

html

Copy

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

Aligning the second item onwards at the end

html

Copy

Vertical Alignment

Default (Stretch, top)

html

Copy

Top

html

Copy

Middle

html

Copy

Bottom

html

Copy

Expand

Stretch

Stretches all columns to fit, columns will still wrap onto a new row if needed.

html

Copy

Example with one column width defined

html

Copy

Example with content of different widths which wrap

html

Copy

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

Expanding the first and last child

html

Copy

Size

Smaller column gap

html

Copy

No wrap

--no-wrap will prevent columns wrapping onto a new line.

With --no-wrap

html

Copy

Responsive support

Resize the examples below to see how the component is responsive.

html

Copy

html

Copy

Manifest

The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/latest/ds-cols/index.mjs

index.mjs

Copy