Columns

The column system provided by the WSU WDS is very limited. You use equal columns of halves, thirds, and quarters and there's separate styling for sidebars, but you can't create uneven columns. It also has fixed breakpoints for where the columns switch to a different layout. For example, you cannot have a layout with three columns on a desktop screen, two columns on a tablet, and a single column on a phone.

Use a wrapper with a class in the format .asis-columns-{NumberOfColumns}-{Breakpoint}. The number of columns is a number between 1 and 12 (inclusive). These are the breakpoints available where the size is the smallest size the where the formatting starts being applied:

phone-small

450px

phone

576px

tablet

768px

tablet-medium

860px

tablet-large

992px

desktop

1260px

ultrawide

1600px

xultrawide

1900px

xxultrawide

2400px

Or exclude the breakpoint to use columns regardless of screen size: .asis-columns-{NumberOfColumns}

You can create unequally sized columns by having a column spread multiple columns:

<div class="asis-columns-3-tablet">
    <div>
        A sidebar maybe?
    </div>
    <div class="col-span-2">
        Main content?
    </div>
</div>

You don't need the number of columns to match the number of elements. If there are more elements than columns, then the extra elements will wrap to a new row with the same number of columns.

Examples

3 Columns Desktop, 2 Columns Tablet

Span Columns