Columns

Variable utility and numbered columns classes with module mixins for responsive modifiers.

Utilities (anchor)

Column utility names and property values
Utility name	Property values
.columns	columns: var(--cols)
.col-1	columns: 1
.col-2	columns: 2
.col-3	columns: 3
.col-4	columns: 4
.col-5	columns: 5
.col-6	columns: 6
.col-7	columns: 7
.col-8	columns: 8
.col-9	columns: 9
.col-10	columns: 10
.col-11	columns: 11
.col-12	columns: 12

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:

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

Examples (anchor)

Variable columns (anchor)

The .columns class is a variable utility for customizing column values inline, single values can be used for column numbers and widths or both can be included for combined styling. Column gap properties work but row gap ones do not.

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.

Preset columns (anchor)

The col-* values utilities provide 12 preset numbered columns with optional responsive modifier classes for controlled design in custom breakpoints (see Using the module below).

You can also use the responsive columns to override values provided using the .columns utility at custom breakpoints.

Using the module (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

custom.scss

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

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

Source code (anchor)

columns.scss

// ---------------------------------------------------------- 
// Columns
// ----------------------------------------------------------
$column-values: (
  "col-1": 1,
  "col-2": 2,
  "col-3": 3,
  "col-4": 4,
  "col-5": 5,
  "col-6": 6,
  "col-7": 7,
  "col-8": 8,
  "col-9": 9,
  "col-10": 10,
  "col-11": 11,
  "col-12": 12,
) !default;

@mixin columns-css {
  .columns {
    columns: var(--cols);
  }
  
  @each $name, $value in $column-values {
    .#{$name} {
      columns: $value;        
    }
  }
}

@mixin columns-xxl-css {
  @each $name, $value in $column-values {
    .#{$name}-xxl {
      columns: $value;        
    }
  }
}

@mixin columns-xl-css {
  @each $name, $value in $column-values {
    .#{$name}-xl {
      columns: $value;        
    }
  }
}

@mixin columns-lg-css {
  @each $name, $value in $column-values {
    .#{$name}-lg {
      columns: $value;        
    }
  }
}

@mixin columns-md-css {
  @each $name, $value in $column-values {
    .#{$name}-md {
      columns: $value;        
    }
  }
}

@mixin columns-sm-css {
  @each $name, $value in $column-values {
    .#{$name}-sm {
      columns: $value;        
    }
  }
}

@mixin columns-xs-css {
  @each $name, $value in $column-values {
    .#{$name}-xs {
      columns: $value;        
    }
  }
}

@mixin columns-xxs-css {
  @each $name, $value in $column-values {
    .#{$name}-xxs {
      columns: $value;        
    }
  }
}