---
title: Columns
---

## Basics

Building a columns layout is very simple:

1 Add a `sta-row` container

2 Add as many `sta-col` column elements as are needed

Each column will have an equal width, no matter the number of columns.

## Config options

### Gaps

By default column rows has a negative margin value while the columns within have a matching padding value. This produces a gap between all columns both horizontally, and vertically when wrapping onto multiple lines, in the same way CSS Grid operates.

This can be changed by adding one of the following modifiers to `.sta-row`.

- `.sta-row--gapless` removes all horizontal and vertical gaps.
- `.sta-row--gapless-h` removes all horizontal gaps only.
- `.sta-row--gapless-v` removes all vertical gaps only.

### Span multiple rows

By default, columns will continue in a single line but this can be overridden to allow columns to wrap onto multiple lines by adding `.sta-row--multiline` modifier to `.sta-row`.

### Vertical alignment

Default alignment is to the top of the row, while the following modifiers can be added to `.sta-row`.

- `.sta-row--align-center` to vertically align columns in the centre of the row.
- `.sta-row--align-bottom` to vertically align columns at the bottom of the row.
- `.sta-row--align-stretch` to make all columns the same height as the tallest column.

### Column direction

Default placement of columns is left to right, this can be reversed by adding `.sta-row--reverse` modifier to `.sta-row`.

## Column widths

Columns can have their widths specified in two different ways.

### Named widths

Add one of the following modifiers to `.sta-col` to specify the width in relation to the width of the container.

- `.sta-col--one-half`
- `.sta-col--one-third`
- `.sta-col--two-thirds`
- `.sta-col--one-quarter`
- `.sta-col--two-quarters`
- `.sta-col--one-fifth`
- `.sta-col--two-fifths`
- `.sta-col--three-fifths`
- `.sta-col--four-fifths`

### Numbered widths

Alternatively, add one of the following modifiers to `.sta-col` to specify the width in relation to a 12 column grid.

- `.sta-col--1`
- `.sta-col--2`
- `.sta-col--3`
- `.sta-col--4`
- `.sta-col--5`
- `.sta-col--6`
- `.sta-col--7`
- `.sta-col--8`
- `.sta-col--9`
- `.sta-col--10`
- `.sta-col--11`
- `.sta-col--12`

### Collapsing column width

If a column does not have a specifed width then it will automatically fill any remaining space in the row. If more than one column does not have a specified width then they will share the total free space evenly between them. To override this behaviour and make the column expand only to the maximum width of its content, add the `.sta-col--collapse` modifier to the `.sta-col` element.

## Offsetting columns

A column can be offset by either a named width or numbered width, which sets a margin on that column. If the row of columns is left to right then then margin is added to the left, while a reversed row of columns causes the offset margin to be added to the right hand side of columns.

### Named width offset

Add one of the modifiers to a `.sta-col`.

- `.sta-col--offset-one-half`
- `.sta-col--offset-one-third`
- `.sta-col--offset-two-thirds`
- `.sta-col--offset-one-quarter`
- `.sta-col--offset-two-quarters`
- `.sta-col--offset-one-fifth`
- `.sta-col--offset-two-fifths`
- `.sta-col--offset-three-fifths`
- `.sta-col--offset-four-fifths`

### Numbered width offset

A number between 1 and 12 can also be used to define an offset based on a 12 column grid.

For example `.sta-col--offset-4` would add a margin equal to 4 column widths.

## Responsive behaviour

### Stacked columns

Default placement of columns is as follows:

- Stacked on mobile
- Row of columns on sizes larger than mobile (currently 576px)

This can be changed by adding the following modifier to `.sta-row`.

- `.sta-row--xs` enables columns on any size
- `.sta-row--sm` enables columns on any size greater than 576px - this is the default behaviour
- `.sta-row--md` enables columns on any size greater than 768px
- `.sta-row--lg` enables columns on any size greater than 992px
- `.sta-row--xl` enables columns on any size greater than 1200px
- `.sta-row--xxl` enables columns on any size greater than 1400px

### Responsive column widths

Define specific column widths for the various breakpoints by adding a modifier in the format of `.sta-col--X-Y` where X is the size of the column and Y is the breakpoint that the size should apply to.

For example, `.sta-col--4-md` will set the column width to be 4/12 of the width when the browser is at the 'md' breakpoint range (between 768px and 992px).