Grid

Sass mixins

Mixin	CSS properties
grid	display: grid
grid-cols($num)	grid-template-columns: repeat($num, minmax(0, 1fr))
grid-cols-none	grid-template-columns: none
grid-rows($num)	grid-template-rows: repeat($num, minmax(0, 1fr))
grid-rows-none	grid-template-rows: none
col-span($num)	grid-column: span $num / span $num
col-span-full	grid-column: 1 / -1
row-span($num)	grid-row: span $num / span $num
row-span-full	grid-row: 1 / -1
auto-cols-auto	grid-auto-columns: auto
auto-cols-min	grid-auto-columns: min-content
auto-cols-max	grid-auto-columns: max-content
auto-cols-fr	grid-auto-columns: minmax(0, 1fr)
auto-rows-auto	grid-auto-rows: auto
auto-rows-min	grid-auto-rows: min-content
auto-rows-max	grid-auto-rows: max-content
auto-rows-fr	grid-auto-rows: minmax(0, 1fr)
grid-flow-row	grid-auto-flow: row
grid-flow-col	grid-auto-flow: column
grid-flow-dense	grid-auto-flow: dense
grid-flow-row-dense	grid-auto-flow: row dense
grid-flow-col-dense	grid-auto-flow: column dense

Responsive range mixins

Pass a base value followed by named breakpoint overrides, such as crayon.grid-cols-range(1, $md: 2, $lg: 4).

Mixin	Purpose
grid-cols-range($base, $breakpoints...)	Responsive grid columns
grid-rows-range($base, $breakpoints...)	Responsive grid rows

Utility classes

Grid Display

Class	Property
grid	display: grid

Grid Template Columns

Class	Property
grid-cols-{n} (1 to 12)	grid-template-columns: repeat({n}, minmax(0, 1fr))
grid-cols-none	grid-template-columns: none

Grid Template Rows

Class	Property
grid-rows-{n} (1 to 12)	grid-template-rows: repeat({n}, minmax(0, 1fr))
grid-rows-none	grid-template-rows: none

Grid Column Span

Class	Property
col-span-{n} (1 to 12)	grid-column: span {n} / span {n}
col-span-full	grid-column: 1 / -1

Grid Row Span

Class	Property
row-span-{n} (1 to 12)	grid-row: span {n} / span {n}
row-span-full	grid-row: 1 / -1

Grid Auto Columns

Class	Property
auto-cols-auto	grid-auto-columns: auto
auto-cols-min	grid-auto-columns: min-content
auto-cols-max	grid-auto-columns: max-content
auto-cols-fr	grid-auto-columns: minmax(0, 1fr)

Grid Auto Rows

Class	Property
auto-rows-auto	grid-auto-rows: auto
auto-rows-min	grid-auto-rows: min-content
auto-rows-max	grid-auto-rows: max-content
auto-rows-fr	grid-auto-rows: minmax(0, 1fr)

Grid Auto Flow

Class	Property
grid-flow-row	grid-auto-flow: row
grid-flow-col	grid-auto-flow: column
grid-flow-dense	grid-auto-flow: dense
grid-flow-row-dense	grid-auto-flow: row dense
grid-flow-col-dense	grid-auto-flow: column dense

Grid examples

Sass mixins

<style lang="scss">
  @use "crayon-css" as crayon;

  .layout-grid {
    @include crayon.grid;
    @include crayon.grid-cols(3);
    @include crayon.gap(4);

    .wide {
      @include crayon.col-span(2);
    }

    .full-row {
      @include crayon.col-span-full;
    }
  }
</style>

Utility classes

<div class="layout-grid grid grid-cols-3 gap-4">
  <div class="wide col-span-2">Wide column</div>
  <div>Narrow column</div>
  <div class="full-row col-span-full">Full width row</div>
</div>

Sass functions

<style lang="scss">
  @use "crayon-css" as crayon;

  .layout-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: crayon.size(4);

    .wide {
      grid-column: span 2 / span 2;
    }

    .full-row {
      grid-column: 1 / -1;
    }
  }
</style>

CSS Variables

<style>
  .layout-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--size-4);
  }

  .layout-grid .wide {
    grid-column: span 2 / span 2;
  }

  .layout-grid .full-row {
    grid-column: 1 / -1;
  }
</style>