Columns

Utilities (anchor)

Responsive mixins (anchor)

Responsive modifier mixins are provided for the column values utilities to include where required in custom breakpoints, the utilities available use the following modifier class naming convention:

.columns-3
.columns-3-xxl
.columns-3-xl
.columns-3-lg
.columns-3-md
.columns-3-sm
.columns-3-xs
.columns-3-xxs

Examples (anchor)

Column gap properties can be used with column styles but row gaps properties cannot.

Preset columns (anchor)

The columns-* utilities provide 6 preset numbered columns with optional responsive modifier classes:

<p class="columns-2 columns-1-sm">

Far far away, behind the word mountains, close to the lands of Verbia, there live the blind texts. Separated they live in Nountown right at the coast of the Semantics, a large language ocean. One day however a small line of blind text decided to leave for the far World of Grammar. When she reached the first hills of the Italic Mountains, she had a last view of Alphabet Village and the winding Autocorrect River that ran through it.

<p class="columns-3 columns-1-sm">

Far far away, behind the word mountains, close to the lands of Verbia, there live the blind texts. Separated they live in Nountown right at the coast of the Semantics, a large language ocean. One day however a small line of blind text decided to leave for the far World of Grammar. When she reached the first hills of the Italic Mountains, she had a last view of Alphabet Village and the winding Autocorrect River that ran through it.

Variable columns (anchor)

The .columns class is a variable utility for customizing column values inline:

<p class="columns" style="--columns: 32ch;">

Far far away, behind the word mountains, close to the lands of Verbia, there live the blind texts. Separated they live in Nountown right at the coast of the Semantics, a large language ocean. One day however a small line of blind text decided to leave for the far World of Grammar. When she reached the first hills of the Italic Mountains, she had a last view of Alphabet Village and the winding Autocorrect River that ran through it.

<p class="columns" style="--columns: 12rem auto;">

Far far away, behind the word mountains, close to the lands of Verbia, there live the blind texts. Separated they live in Nountown right at the coast of the Semantics, a large language ocean. One day however a small line of blind text decided to leave for the far World of Grammar. When she reached the first hills of the Italic Mountains, she had a last view of Alphabet Village and the winding Autocorrect River that ran through it.

Combined (anchor)

You can also use both .columns and .columns-* classes in different combinations:

<p class="columns columns-3-md columns-1-sm" style="--columns: 32ch;">

Far far away, behind the word mountains, close to the lands of Verbia, there live the blind texts. Separated they live in Nountown right at the coast of the Semantics, a large language ocean. One day however a small line of blind text decided to leave for the far World of Grammar. When she reached the first hills of the Italic Mountains, she had a last view of Alphabet Village and the winding Autocorrect River that ran through it.

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

@use "stylemods/scss" as *;
@include columns-css;

// Example breakpoint
@media (width < 480px) {
  @include columns-sm-css;
}

See the using modules page for more information.

Using the framework (anchor)

Using the recommended custom setup enable the styles (and required breakpoints) in an overrides document:

@use "stylemods/scss/configuration" as *;
$enable-columns:      true;
$enable-columns-sm:   true;

Include the overrides and the framework styles with your custom document for compiling the framework:

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information.

Source code (anchor)

The Columns source file is included with the layout module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source document

stylemods/scss/layout/columns.scss

View on Github

https://github.com/pmbrown/StyleMods/blob/main/scss/layout/columns.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.