Grid

Utilities (anchor)

Responsive mixins (anchor)

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

.grid
.grid-xxl
.grid-xl
.grid-lg
.grid-md
.grid-sm
.grid-xs
.grid-xxs

Examples (anchor)

Grid columns (anchor)

Grid columns are applied to a container to automatically create a checkerboard grid of child elements:

<div class="grid-columns g-4 g-2-md gap-2 mb-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

The default fraction widths (1fr) used ensure the column sizes remains fixed regardless of content:

<div class="grid-columns g-4 g-2-xs gap-2">
  <div>1</div>
  <div>The quick brown fox jumps over the lazy dog.</div>
  <div>3</div>
  <div>4</div>
</div>

But you can also change the widths to auto inline so the columns stretch to match the content within:

<div class="grid-columns g-4 g-2-xs gap-2" style="--gmax:auto;">
  ...
</div>

Auto-fit columns (anchor)

New v1.5.0. The .grid-autofit columns include a (customizable) default minimum width of 300px (18.75rem) designed to automatically wrap columns responsively without custom breakpoint modifiers:

<div class="grid-autofit gap-2 mb-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

The default width can be customized using CSS variables inline:

<div class="grid-autofit gap-2" style="--gmin:220px;">
  ...
</div>

Grid layouts (anchor)

The grid layout utilities are applied to child elements to enable creating basic page and content layouts:

<div class="grid-columns g-12 gap-2">
  <div class="col-3">.col-3</div>
  <div class="col-6">.col-6</div>
  <div class="col-3">.col-3</div>
</div>

Grid row classes provide scope for more complex layouts, and grid start and end utilities enable designing content flow to match visual positioning within the grid:

<div class="grid-columns g-12 gap-2">
  <div class="col-3 row-2">1</div>
  <div class="col-6">2</div>
  <div class="col-start-4 col-end-10">3</div>
  <div class="col-3 col-start-10 row-start-1 row-end-3">4</div>
</div>

Use the responsive classes to change grid patterns at specific breakpoints:

<div class="grid-columns g-12 gap-2 mb-3">
  <div class="col-3 row-2-lg col-12-xs row-1-xs">1</div>
  <div class="col-6 col-9-lg col-12-xs">2</div>
  <div class="col-3 col-9-lg col-12-xs">3</div>
</div>

You can also use other values instead of 12 to define the default grid pattern:

<div class="grid-columns g-9 gap-2">
  <div class="col-2">.col-2</div>
  <div class="col-5">.col-5</div>
  <div class="col-2">.col-2</div>
</div>

Using the module (anchor)

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

Each set of utilities can be included individually:

@use "stylemods/scss" as *;
@include grid-display-css;
@include grid-columns-css;
@include grid-layouts-css; // Requires grid-columns

@media (width < 480px) {
  @include grid-display-sm-css;
  @include grid-columns-sm-css;
  @include grid-layouts-sm-css
}

Or included grouped in a single mixin:

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

@media (width < 480px) {
  @include grid-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-grid:             true;
$enable-grid-columns:     true;
$enable-grid-layouts:     true; // Requires grid-columns

$enable-grid-sm:          true;
$enable-grid-columns-sm:  true;
$enable-grid-layouts-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 Grid 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/grid.scss

View on Github

https://github.com/pmbrown/StyleMods/blob/main/scss/layout/grid.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.