Grid

Introduction

GitHub Page

JigSass Grid is a responsive Sass (SCSS) flexbox-based grid system, with a display: inline-block fallback backed in, where possible.

It is intended to be both flexible (pun intended) and easy to use. As part of the JigSass ecosystem, JigSass Grid integrates with its other modules, relying on some of them for consistent resposive breakpoints, sizing and more.

Installation

Using npm:

npm i -S jigsass-objects-grid

Features

Availeable classes

For classes and modifiers (including responsive modifiers) to be generated in CSS output, they must be explicitly enabled in the configuration maps (see usage below).

Grid containers:
.o-grid

  • --start, --center, --end, --rev, --space-between, --space-around
  • --top, --middle, --bottom, --equal-height
  • --gutter-X (gutter width, See here).

Grid items:
.o-grid__item

  • --col, --center,
  • --top, --middle, --bottom, --equal-height
  • --gutter-X (gutter width, See here).
  • --gutter-gutter-rule-X (See here).
  • --X-of-Y
  • --offset-X-of-Y

Usage

First, import JigSass Grid into your main stylesheet:

@import 'path/to/jigsass-objects-grid/scss/index'

And optionally reconfigure the defaults to you liking.

To create a grid context, simply attach the o-grid class to an element, any element, which will serve as a grid container. You can now add grid items to it (with a class of o-grid__item). Grid containers' only legitimate children are grid items, and those, in turen, may only reside within a grid container.

Like all other JigSass modules, JigSass Grid does not automatically generate any CSS output when imported. In order to use its classes, you would have to first explicitly indicate your intention to use them by enabling their generation in the associated configurations map, Leaving us only with CSS we need.

All JigSass Grid classes are responsive-enabled, using JigSass MQ and the breakpoints defined in the $jigsass-breakpoints variable.

Based on enabled selectors in the configuration map, responsive modifiers are generated according to the following logic:

.o-grid[--modifier][-[-from-{breakpoint-name}][-until-{breakpoint-name}][-misc-{breakpoint-name}]]
.o-grid__item[--modifier][-[-from-{breakpoint-name}][-until-{breakpoint-name}][-misc-{breakpoint-name}]]

So, assuming the medium, large and landscape breakpoints are defined in $jigsass-breakpoints as 600px, 1024px and (orientation: landscape) respectively,

$jigsass-grid-conf: (
  no-breakpoint: (
    no-modifier: true,
    end: true,
  ),
  until-medium: (
    end: true,
  ),
  from-large-when-landscape: (
    end: true,
  ),
)

will generate the following classes:

  • .o-grid, which is not limited to any media-query.
  • .o-grid--end, which is not limited to any media-query.
  • .o-grid--end--until-medium, which will be in effect at (max-width: 37.49em) and will override styles in the default class until that point.
  • .o-grid--end--from-large-when-landscape, which will go into effect at (min-width: 64em) and (orientation: landscape) and will override styles in the default class under these conditions.

CSS Outpout

By default, JigSass Grid does not generate any CSS output when imported into a stylesheet. CSS output must be enabled on a per-selector basis, inside the dedicated configuration maps:

Grid container and grid container modifier classes

$jigsass-grid-config

Type: Map

Configuration map for enabling generation of grid container and grid container modifier classes.

Default:

$jigsass-grid-conf: (
  no-breakpoint: (
    no-modifier: false,

    // Horizontal alignment modifiers
    start: false,
    center: false,
    end: false,
    rev: false,

    // Vertical alignment modifiers
    equal-height: false,
    top: false,
    middle: false,
    bottom: false,

    // Horizontal distribution modifiers
    space-between: false,
    space-around: false,

    // gutter-width modifiers
    // Enable gutter modifiers defined in
    // `$jigsass-grid-gutter-modifiers` here.
  ),
);

Example:

$jigsass-grid-conf: (
  no-breakpoint: (
    no-modifier: true,  // Enables generation of the `.o-grid`
                        // class outside of any media query.
    end: true,          // Enables generation of the `.o-grid--end`
                        // modifier class outside of any media query.
  ),
  from-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    end: true,          // Enables generation of the `.o-grid--end--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  until-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
   end: true,           // Enables generation of the `.o-grid--end--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  when-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
    end: true,          // Enables generation of the `.o-grid--end--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
  ),
  from-<bp-name>-until-<bp-name>: (...);
  from-<bp-name>-when-<bp-name>: (...);
  until-<bp-name>-when-<bp-name>: (...);
  from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
);

Grid item and grid item modifier classes

$jigsass-grid-item-config

Type: Map

Configuration map for enabling generation of grid item and grid item modifier classes

Default:

$jigsass-grid-item-conf: (
  no-breakpoint: (
    no-modifier: false,
    col: false,
    fixed: false,
    center: false,

    // Enable item specific gutter width modifiers
    // defined in `$jigsass-grid-gutter-modifiers`
    // here.

    // Enable item width modifiers
    // based on ratios defined in
    // `$jigsass-grid-cols`here.

    // Enable item offset modifiers
    // based on ratios defined in
    // `$jigsass-grid-cols`here.

    // Enable gutter rule modifiers defined
    // in `$jigsass-grid-gutter-rules` here
  ),
);

Example:

$jigsass-grid-item-conf: (
  no-breakpoint: (
    no-modifier: true,  // Enables generation of the `.o-grid__item`
                        // class outside of any media query.
    col: true,          // Enables generation of the `.o-grid__item--col`
                        // modifier class outside of any media query.
  ),
  from-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid__item--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    col: true,          // Enables generation of the `.o-grid__item--col--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  until-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid__item--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    col: true,          // Enables generation of the `.o-grid__item--col--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  when-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid__item--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
    col: true,          // Enables generation of the `.o-grid__item--col--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
  ),
  from-<bp-name>-until-<bp-name>: (...);
  from-<bp-name>-when-<bp-name>: (...);
  until-<bp-name>-when-<bp-name>: (...);
  from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
);

CSS Outpout

By default, JigSass Grid does not generate any CSS output when imported into a stylesheet. CSS output must be enabled on a per-selector basis, inside the dedicated configuration maps:

Grid container and grid container modifier classes

$jigsass-grid-config

Type: Map

Configuration map for enabling generation of grid container and grid container modifier classes.

Default:

$jigsass-grid-conf: (
  no-breakpoint: (
    no-modifier: false,

    // Horizontal alignment modifiers
    start: false,
    center: false,
    end: false,
    rev: false,

    // Vertical alignment modifiers
    equal-height: false,
    top: false,
    middle: false,
    bottom: false,

    // Horizontal distribution modifiers
    space-between: false,
    space-around: false,

    // gutter-width modifiers
    // Enable gutter modifiers defined in
    // `$jigsass-grid-gutter-modifiers` here.
  ),
);

Example:

$jigsass-grid-conf: (
  no-breakpoint: (
    no-modifier: true,  // Enables generation of the `.o-grid`
                        // class outside of any media query.
    end: true,          // Enables generation of the `.o-grid--end`
                        // modifier class outside of any media query.
  ),
  from-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    end: true,          // Enables generation of the `.o-grid--end--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  until-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
   end: true,           // Enables generation of the `.o-grid--end--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  when-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
    end: true,          // Enables generation of the `.o-grid--end--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
  ),
  from-<bp-name>-until-<bp-name>: (...);
  from-<bp-name>-when-<bp-name>: (...);
  until-<bp-name>-when-<bp-name>: (...);
  from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
);

Grid item and grid item modifier classes

$jigsass-grid-item-config

Type: Map

Configuration map for enabling generation of grid item and grid item modifier classes

Default:

$jigsass-grid-item-conf: (
  no-breakpoint: (
    no-modifier: false,
    col: false,
    fixed: false,
    center: false,

    // Enable item specific gutter width modifiers
    // defined in `$jigsass-grid-gutter-modifiers`
    // here.

    // Enable item width modifiers
    // based on ratios defined in
    // `$jigsass-grid-cols`here.

    // Enable item offset modifiers
    // based on ratios defined in
    // `$jigsass-grid-cols`here.

    // Enable gutter rule modifiers defined
    // in `$jigsass-grid-gutter-rules` here
  ),
);

Example:

$jigsass-grid-item-conf: (
  no-breakpoint: (
    no-modifier: true,  // Enables generation of the `.o-grid__item`
                        // class outside of any media query.
    col: true,          // Enables generation of the `.o-grid__item--col`
                        // modifier class outside of any media query.
  ),
  from-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid__item--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    col: true,          // Enables generation of the `.o-grid__item--col--from-<bp-name>`
                        // class inside a min-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  until-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid__item--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
    col: true,          // Enables generation of the `.o-grid__item--col--until-<bp-name>`
                        // class inside a max-width media query
                        // defined ins `$jigsass-breakpoints.length`.
  ),
  when-<bp-name>: (
    no-modifier: true,  // Enables generation of the `.o-grid__item--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
    col: true,          // Enables generation of the `.o-grid__item--col--when-<bp-name>`
                        // class inside a misc media query
                        // defined ins `$jigsass-breakpoints.features`.
  ),
  from-<bp-name>-until-<bp-name>: (...);
  from-<bp-name>-when-<bp-name>: (...);
  until-<bp-name>-when-<bp-name>: (...);
  from-<bp-name>-until-<bp-name>-when-<bp-name>: (...);
);

Configuration

JigSass Grid can be tweaked using the following built-in configuration variables. To override the default values, set your own before importing JigSass Grid.

Grid container class name

$jigsass-grid-class

Type: String

The class-name (sans the leading .) used for grid containers.

Default: o-string

Grid item class name

$jigsass-grid-item-class

Type: String

The class-name (sans the leading .) used for grid items

Default: $jigsass-grid-class + __item

Flexbox

$jigsass-grid-flexbox

Type: Boolean

Determines if the grid system be based on flexbox.

Default: true

Flexbox fallback

$jigsass-grid-flexbox-fallback

Type: Boolean or String
Determines if to include a flexbox fallback and the qualifier class to use if so (e.g, .no-flexwrap when using Modernizr defaults)

Set to false to disable fallback altogether, and to a class-name (sans the leading .) used as the qualifier class if fallback is desirable.

Default: no-flexwrap

Default gutter width

$jigsass-grid-default-gutter

Type: Number

A unitless number. The default number of base rhythm units (as defined in $jigsass-sizes.rhythm-unit) to use as the default gutter between grid items.

Default: 4

Gutter width Modifiers

$jigsass-grid-gutter-modifiers

Type: Map

Specifies gutter-width modifiers that will be available.

A map where each key is a modifier's name and its value is a unitless number, denoting the number of rhythm units to serve as gutter-width for each modifier.

Default: (gutter-0: 0, gutter-1: 1, gutter-2: 2, gutter-8: 8)

Grid columns

$jigsass-grid-cols

Type: List

A list of unitless numbers, specifying a number of columns a grid item can be split into. Setting $jigsass-grid-cols to 7 12would mean that grid items could be x-of-7 or x-of-12 in width.

Default: 12

Gutter rules

Specifies names and styles of gutter rule modifiers

A map where each key is a modifier's name, and its value is the border style to apply to that modifier's column rule.

Type: Map

Default: (gutter-rule-1: 1px solid #ccc)

Configuration

JigSass Grid can be tweaked using the following built-in configuration variables. To override the default values, set your own before importing JigSass Grid.

Grid container class name

$jigsass-grid-class

Type: String

The class-name (sans the leading .) used for grid containers.

Default: o-string

Grid item class name

$jigsass-grid-item-class

Type: String

The class-name (sans the leading .) used for grid items

Default: $jigsass-grid-class + __item

Flexbox

$jigsass-grid-flexbox

Type: Boolean

Determines if the grid system be based on flexbox.

Default: true

Flexbox fallback

$jigsass-grid-flexbox-fallback

Type: Boolean or String
Determines if to include a flexbox fallback and the qualifier class to use if so (e.g, .no-flexwrap when using Modernizr defaults)

Set to false to disable fallback altogether, and to a class-name (sans the leading .) used as the qualifier class if fallback is desirable.

Default: no-flexwrap

Default gutter width

$jigsass-grid-default-gutter

Type: Number

A unitless number. The default number of base rhythm units (as defined in $jigsass-sizes.rhythm-unit) to use as the default gutter between grid items.

Default: 4

Gutter width Modifiers

$jigsass-grid-gutter-modifiers

Type: Map

Specifies gutter-width modifiers that will be available.

A map where each key is a modifier's name and its value is a unitless number, denoting the number of rhythm units to serve as gutter-width for each modifier.

Default: (gutter-0: 0, gutter-1: 1, gutter-2: 2, gutter-8: 8)

Grid columns

$jigsass-grid-cols

Type: List

A list of unitless numbers, specifying a number of columns a grid item can be split into. Setting $jigsass-grid-cols to 7 12would mean that grid items could be x-of-7 or x-of-12 in width.

Default: 12

Gutter rules

Specifies names and styles of gutter rule modifiers

A map where each key is a modifier's name, and its value is the border style to apply to that modifier's column rule.

Type: Map

Default: (gutter-rule-1: 1px solid #ccc)

Responsive

Resize your window to see how item stacking changes.

<!-- In HTML -->
<section class="o-grid">
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--11-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--1-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--2-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--10-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--9-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--3-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--4-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--8-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--7-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--5-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--6-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--6-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--5-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--7-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--8-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--4-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--3-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--9-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--10-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--2-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--1-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--11-of-12--from-medium"><div class="fpo"></div></div>
      <div class="o-grid__item o-grid__item--12-of-12 "><div class="fpo"></div></div>
</section>

All JigSass Grid elements (grid cotainer, grid item and all their modifiers) are completly responsive using JigSass MQ and the breakpoints defined in $jigsass-breakpoints`.

Based on the arguments passed to the jigsass-grid and jigsass-grid-item mixins, responsive modifiers are generated according to the following logic:

.o-grid--modifier-[-from-{breakpoint-name}][-until-{breakpoint-name}][-misc-{breakpoint-name}]
.o-grid__item--modifier-[-from-{breakpoint-name}][-until-{breakpoint-name}][-misc-{breakpoint-name}]

So, assuming the medium, large and landscape breakpoints are defined in $jigsass-breakpoints as 600px, 1024px and (orientation: landscape) respectively,

@include jigsass-grid-item(1-of-12);

will generate the .item-class--1-of12 class, which is the default, and is not limitted to any media-query.

@include jigsass-grid-item(1-of-12, $until: medium);

will generate the .item-class--1-of12--until-medium class, which will go into effect at (max-width: 37.49em) and will override styles in the default class until that point.

@include jigsass-grid-item(1-of-12, $from: large, $misc: landscape);

will generate the .item-class--1-of12--from-large-when-landscape class, which will go into effect at (min-width: 64em) and (orientation: landscape) and will override styles in the default class from that point on.

Regardless of how many times a class is included, or where, it will only be generated once, where jigsass-objects-grid was imported, leaving us with a css file as small as possible, and a predictable cascade.

Nested Grids

Grid elements can be endlessly nested inside eachother

Usage example:

<!-- In HTML -->
<section class='o-grid o-grid--equal-height'>
  <div class='o-grid__item o-grid__item--8-of-12'>
    <div class='fpo'>
      <div class='o-grid o-grid--equal-height'>
        <div class='o-grid__item o-grid__item--6-of-12'>
          <div class='fpo fpo--b'></div>
        </div>
        <div class='o-grid__item o-grid__item--6-of-12'>
          <div class='fpo fpo--b'>
            <div class='o-grid'>
              <div class='o-grid__item o-grid__item--6-of-12'>
                <div class='fpo fpo--c'></div>
              </div>
              <div class='o-grid__item o-grid__item--6-of-12'>
                <div class='fpo fpo--c'></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class='o-grid__item o-grid__item--4-of-12'>
    <div class='fpo'></div>
  </div>
</section>

Fixed-fluid

The grid system allows for a mixture of fixed and fluid units, but requires some customisation. For example, a fixed-width sidebar can be created by using item modifiers and two utility clases:

<!-- In HTML -->
<section class='o-grid o-grid--equal-height'>
  <div class='o-grid__item'><div class='fpo'></div></div>

  <div class='o-grid__item'><div class='fpo'></div></div>

  <aside class='
    o-grid__item
    o-grid__item--fixed
    o-grid__item--col
    u-mw--200px u-fxb--200px
  '>
    <div class='fpo'>This sidebar is fixed at 200px width</div>

    <div class='fpo'>
      <div class='o-grid'>
        <div class='o-grid__item o-grid__item--6-of-12'>
          <div class='fpo fpo--b'></div>
        </div>
        <div class='o-grid__item o-grid__item--6-of-12'>
          <div class='fpo fpo--b'></div>
        </div>
      </div>
    </div>

    <div class='fpo'></div>
  </aside>
</section>

Grid Container

o-grid

Any HTML element (including lists) may serve as a grid container, however, grid containers may contain no other elements other than grid items.

A grid element has negative margins the length of half a gutter at its left and right, to compensate of the first and last column's gutter and ease calculations.

Unless o-grid__items are given a width modifier class, all grid items will be equally distributed along a single row.

  • $jigsass-grid-class (default: grid): Determines the class-name used for grid containers.
  • $jigsass-grid-flexbox (default: true): Determines whether to use flexbox or not.
  • $jigsass-grid-flexbox-fallback (default: no-flaxwrap): Determines if to include a flexbox fallback and the qualifier class to use if so (e.g, .no-flexwrap when using Modernizr defaults). Set to false to disable fallback altogether, and to a class-name (sans the leading .) used as the qualifier class if fallback is desirable.
  • $jigsass-grid-default-gutter (default: 4): A unitless number used to determine number of base rhythm units (as defined in $jigsass-sizes.rhythm-unit) to use as gutter length between grid items in the default grid container.

Usage example:

  <!-- In HTML -->
  <section class='o-grid'>
    <!-- first row -->
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'> 1 of 3 </div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'> 1 of 3 </div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'> 1 of 3 </div>
    </div>
    <!-- second row -->
    <div class='o-grid__item'>
      <div class='fpo'>auto-sized</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>auto-sized</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid {
    display: flexbox;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin-left: -2rem;
    margin-right: -2rem;
  }

  // Targets direct descendants using the universal selector
  // instead of actual grid items in order to keep
  // specificity low. This works, as only grid items are
  // legitimate children of grid containers.
  .o-grid > * {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  // When `$jigsass-grid-flexbox-fallback` is set to `no-flexwrap`
  .no-flexwrap .o-grid {
    display: block;
    letter-spacing: -.043em;
    text-align: (left|right);
  }

  // When `$jigsass-grid-flexbox` is disabled
  .o-grid {
    display: block;
    letter-spacing: -.043em;
    list-style: none;
    margin-left: -2rem;
    margin-right: -2rem;
    text-align: (left|right);
  }
  .o-grid > * {
    padding-left: 2rem;
    padding-right: 2rem;
  }

o-grid--start

Aligns grid items to horizontal start of the grid container.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--start'>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>1 of 4</div>
    </div>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>1 of 4</div>
    </div>
    <div class='o-grid__item o-grid__item--8-of-12'>
      <div class='fpo'>2 of 3</div>
    </div>
    <div class='o-grid__item o-grid__item--10-of-12'>
      <div class='fpo'>5 of 6</div>
    </div>
    <div class='o-grid__item o-grid__item--12-of-12'>
      <div class='fpo'>1 of 1</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid--start {
    justify-content: flex-start;
  }

  // When `$jigsass-grid-flexbox-fallback` is set to `no-flexwrap`
  .no-flexwrap .o-grid--start {
    text-align: (left|right);
}

  // When `$jigsass-grid-flexbox` is disabled
  .o-grid--start {
    text-align: (left|right);
  }

o-grid--center

Aligns grid items to horizontal center of the grid container.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--center'>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>1 of 4</div>
    </div>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>1 of 4</div>
    </div>
    <div class='o-grid__item o-grid__item--8-of-12'>
      <div class='fpo'>2 of 3</div>
    </div>
    <div class='o-grid__item o-grid__item--10-of-12'>
      <div class='fpo'>5 of 6</div>
    </div>
    <div class='o-grid__item o-grid__item--12-of-12'>
      <div class='fpo'>1 of 1</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid--center {
    justify-content: center;
  }

  // When `$jigsass-grid-flexbox-fallback` is set to `no-flexwrap`
  .no-flexwrap .o-grid--center {
    text-align: center;
  }

  // When `$jigsass-grid-flexbox` is disabled
  .o-grid--center {
    text-align: center;
  }

o-grid--end

Aligns grid items to horizontal end of the grid container.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--end'>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>1 of 4</div>
    </div>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>1 of 4</div>
    </div>
    <div class='o-grid__item o-grid__item--8-of-12'>
      <div class='fpo'>2 of 3</div>
    </div>
    <div class='o-grid__item o-grid__item--10-of-12'>
      <div class='fpo'>5 of 6</div>
    </div>
    <div class='o-grid__item o-grid__item--12-of-12'>
      <div class='fpo'>1 of 1</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid--end {
    justify-content: flex-end;
  }

  // When `$jigsass-grid-flexbox-fallback` is set to `no-flexwrap`
  .no-flexwrap .o-grid--end {
    text-align: (left|right);
  }
  // When `$jigsass-grid-flexbox` is disabled
  .o-grid--end {
    text-align: (left|right);
  }

o-grid--rev

Reversed grid.

items 1, 2, 3, 4 in the markup will be visually displayed in 4, 3, 2, 1 order.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--rev'>
    <div class='o-grid__item'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 3</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 4</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid--rev {
    flex-direction: row-reverse;
  }

  // When `$jigsass-grid-flexbox-fallback` is set to `no-flexwrap`
  .no-flexwrap .o-grid--start {
    direction: (rtl|ltr);
  }

  .no-flexwrap .o-grid--rev > .o-grid__item {
    direction: (rtl|ltr); // Opposite of the above
  }

  // When `$jigsass-grid-flexbox` is disabled
  .o-grid--start {
    direction: (rtl|ltr);
  }

  .o-grid--rev > .o-grid__item {
    direction: (rtl|ltr); // Opposite of the above
  }

o-grid--equal-height

Stretch all grid items on a single row to the height of the tallest grid item.

Only works with flexbox, no fallback available.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--equal-height'>
    <!-- first row -->
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'>
        1 of 3<br />
        Stretches to fill height by default, despite its content not filling the space
      </div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'>
        1 of 3<br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis
        velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque
        velit condimentum eu.
      </div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'>
        1 of 3<br />
        Stretches to fill height by default, despite its content not filling the space
      </div>
    </div>
    <!-- second row -->
    <div class='o-grid__item'>
      <div class='fpo'>auto-sized</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>auto-sized</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid--equal-height > o-grid__item {
    display: flex;
  }

o-grid--top

Top aligned grid items

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--top'>
    <div class='o-grid__item'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo fpo--tall'>Item 3</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 4</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 5</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid--top {
    align-items: flex-start;
  }

  .o-grid--top > * {
    vertical-align: top;
  }

o-grid--middle

Middle aligned grid items

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--middle'>
    <div class='o-grid__item'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo fpo--tall'>Item 3</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 4</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 5</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid--middle {
    align-items: center;
  }

  .o-grid--middle >  * {
    vertical-align: middle;
  }

o-grid--bottom

Bottom aligned grid items

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--bottom'>
    <div class='o-grid__item'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo fpo--tall'>Item 3</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 4</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 5</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid--bottom {
    align-items: flex-end;
  }

  .o-grid--bottom > * {
    vertical-align: bottom;
  }

o-grid--space-between

Distribute grid items equally across the main flex axis.

Use with care. Only available with flexbox. No fallback.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--space-between'>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item o-grid__item--3-of-12'>
      <div class='fpo'>Item 3</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid--space-between {
    justify-content: space-between
  }

o-grid--space-around

Equally distribute space around grid items across the main flex axis, meaning, including before the first item and after the last.

Use with care. Only available with flexbox. No fallback.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--space-around'>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'>Item 2</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid--space-around {
    justify-content: space-around
  }

o-grid--gutter-0

Modify the width of column gutters to that of 0 base rhythm units

  • $jigsass-grid-gutter-modifiers: Specifies the gutter-width modifiers that can be generated. A map of modifiers, where each key is a modifier's name and value is a unitless numbers denoting amounts of rhythm units to serve as gutter-width in each modifier.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--gutter-0'>
    <div class='o-grid__item'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 3</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid--gutter-0 {
    margin-left: 0rem;
    margin-right: 0rem;
  }

  // Targets direct descendants using the universal selector
  // instead of o-grid__item in order to keep
  // specificity low. This works, as only grid items are
  // legitimate children of o-grid.
  .o-grid--gutter-0 > * {
    padding-left: 0rem;
    padding-right: 0rem;
  }

o-grid--gutter-1

Modify the width of column gutters to that of 1 base rhythm units

  • $jigsass-grid-gutter-modifiers: Specifies the gutter-width modifiers that can be generated. A map of modifiers, where each key is a modifier's name and value is a unitless numbers denoting amounts of rhythm units to serve as gutter-width in each modifier.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--gutter-1'>
    <div class='o-grid__item'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 3</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid--gutter-1 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  // Targets direct descendants using the universal selector
  // instead of o-grid__item in order to keep
  // specificity low. This works, as only grid items are
  // legitimate children of o-grid.
  .o-grid--gutter-1 > * {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

o-grid--gutter-2

Modify the width of column gutters to that of 2 base rhythm units

  • $jigsass-grid-gutter-modifiers: Specifies the gutter-width modifiers that can be generated. A map of modifiers, where each key is a modifier's name and value is a unitless numbers denoting amounts of rhythm units to serve as gutter-width in each modifier.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--gutter-2'>
    <div class='o-grid__item'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 3</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid--gutter-2 {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  // Targets direct descendants using the universal selector
  // instead of o-grid__item in order to keep
  // specificity low. This works, as only grid items are
  // legitimate children of o-grid.
  .o-grid--gutter-2 > * {
    padding-left: 1rem;
    padding-right: 1rem;
  }

o-grid--gutter-8

Modify the width of column gutters to that of 8 base rhythm units

  • $jigsass-grid-gutter-modifiers: Specifies the gutter-width modifiers that can be generated. A map of modifiers, where each key is a modifier's name and value is a unitless numbers denoting amounts of rhythm units to serve as gutter-width in each modifier.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--gutter-8'>
    <div class='o-grid__item'>
      <div class='fpo'>Item 1</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 2</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>Item 3</div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid--gutter-8 {
    margin-left: -4rem;
    margin-right: -4rem;
  }

  // Targets direct descendants using the universal selector
  // instead of o-grid__item in order to keep
  // specificity low. This works, as only grid items are
  // legitimate children of o-grid.
  .o-grid--gutter-8 > * {
    padding-left: 4rem;
    padding-right: 4rem;
  }

Grid Item

o-grid__item

Any HTML element (including lists) may serve as a grid item, however, grid items must only be placed as the direct descendants of a grid container.

Each grid item has padding the length of half a single gutter at its left and right edges, creating a gap between the different items. The gutter's width can de modified at the grid level, or overriden on a per-grid item basis.

Grid items are set to box-sizing: border-box, so that the padding used to form gutters is taken into consideration when setting item widths.

Unless grid items are given a width modifier class, and as long as flexbox is available, all grid items will be equally distributed along a single row.

Flexbox fallback caveat:

When flexbox isn't available, JigSass Grid can be set to fall back to using a display: inline-block based grid system. Using a display: inline-block based gird system has many advantages over traditional, float based grid systems, but also one notable drawback: whitespace between grid items, which are inline elements, is rendered, and can break your grid. JigSass Grid tries to take care of that for you by setting the gird container's letter-spacing to -0.31em, which eliminates white-space between grid cells with all non-monospaced fonts. When using a monospace font-face as your base font, set the grid container's font-family to sans-serif and re-apply your default font to grid items.

The safest option is to comment out the whitespace between grid items:

  <section class='o-grid'>
    <div class='o-grid__item'>
      ...
    </div><!--
    --><div class='o-grid__item'>
      ...
    </div>
  </section>
  • $jigsass-grid-item-class (default: o-grid__item): Determines the class-name used for grid containers.

Usage example:

  <!-- In HTML -->
  <section class='o-grid'>
    <!-- First row -->
    <div class='o-grid__item'>
      <div class='fpo'>auto-sized</div>
    </div>
    <div class='o-grid__item'>
      <div class='fpo'>auto-sized</div>
    </div>
    <!-- Second row -->
    <div class='o-grid__item o-grid__item--12-of-12'>
      <div class='fpo'> 1 of 1 </div>
    </div>
    <!-- Third row -->
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'> 1 of 3 </div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'> 1 of 3 </div>
    </div>
    <div class='o-grid__item o-grid__item--4-of-12'>
      <div class='fpo'> 1 of 3 </div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid__item {
    box-sizing: border-box;
    list-style: none;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
  }

  // When `$jigsass-grid-flexbox-fallback` is set to `no-flexwrap`
  .no-flexwrap .o-grid {
    display: inline-block;
    letter-spacing: normal;
    text-align: (left|right);
    text-rendering: auto;
    word-spacing: normal;
  }

  // When `$jigsass-grid-flexbox` is disabled
  .o-grid {
    box-sizing: border-box;
    display: inline-block;
    letter-spacing: normal;
    list-style: none;
    text-align: (left|right);
    text-rendering: auto;
    word-spacing: normal;
  }

o-grid__item--col

Sets a grid item's main flex axis to vertical. Often useful when used in conjuction with the --equal-height grid container modifier.

Only available when flexbox is supported.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--equal-height'>
    <!-- first row -->
    <div class='o-grid__item
                o-grid__item--col
                o-grid__item--6-of-12'
    >
      <div class='fpo'></div>
      <div class='fpo'>These boxes are in a column</div>
      <div class='fpo'></div>
    </div>
    <div class='o-grid__item o-grid__item--6-of-12'>
      <div class='fpo'></div>
      <div class='fpo'></div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid__item--col {
    flex-direction: row;
  }

o-grid__item--center

Horizontaly centers a single grid inside it's grid container.

Usage example:

  <!-- In HTML -->
  <section class='o-grid'>
    <div class='o-grid__item o-grid__item--7-of-12'>
      <div class='fpo'></div>
    </div>
    <div class='
      o-grid__item
      o-grid__item--center
      o-grid__item--7-of-12
    '>
      <div class='fpo'>Centered</div>
    </div>
    <div class='o-grid__item o-grid__item--7-of-12'>
      <div class='fpo'></div>
    </div>
  </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid__item--center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

o-grid__item--gutter-0

Modify the width of a gutter between an individual grid item and the next one to that of 0 base rhythm units.

Do not set item-level gutter modifiers on items in the last column of a grid.

  • $jigsass-grid-gutter-modifiers: Specifies the gutter-width modifiers that can be generated. A map of modifiers, where each key is a modifier's name and value is a unitless numbers denoting amounts of rhythm units to serve as gutter-width in each modifier.

Usage example:

  <!-- In HTML -->
  <section class='o-grid'>
  <div class='o-grid__item'>
  <div class='fpo'>Item 1</div>
  </div>
  <div class='o-grid__item o-grid__item--gutter-0'>
  <div class='fpo'>Item 2</div>
  </div>
  <div class='o-grid__item'>
  <div class='fpo'>Item 3</div>
  </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid__item--gutter-0 {
    padding-left: 0rem;
    padding-right: 0rem;
  }

o-grid__item--gutter-1

Modify the width of a gutter between an individual grid item and the next one to that of 1 base rhythm units.

Do not set item-level gutter modifiers on items in the last column of a grid.

  • $jigsass-grid-gutter-modifiers: Specifies the gutter-width modifiers that can be generated. A map of modifiers, where each key is a modifier's name and value is a unitless numbers denoting amounts of rhythm units to serve as gutter-width in each modifier.

Usage example:

  <!-- In HTML -->
  <section class='o-grid'>
  <div class='o-grid__item'>
  <div class='fpo'>Item 1</div>
  </div>
  <div class='o-grid__item o-grid__item--gutter-1'>
  <div class='fpo'>Item 2</div>
  </div>
  <div class='o-grid__item'>
  <div class='fpo'>Item 3</div>
  </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid__item--gutter-1 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

o-grid__item--gutter-2

Modify the width of a gutter between an individual grid item and the next one to that of 2 base rhythm units.

Do not set item-level gutter modifiers on items in the last column of a grid.

  • $jigsass-grid-gutter-modifiers: Specifies the gutter-width modifiers that can be generated. A map of modifiers, where each key is a modifier's name and value is a unitless numbers denoting amounts of rhythm units to serve as gutter-width in each modifier.

Usage example:

  <!-- In HTML -->
  <section class='o-grid'>
  <div class='o-grid__item'>
  <div class='fpo'>Item 1</div>
  </div>
  <div class='o-grid__item o-grid__item--gutter-2'>
  <div class='fpo'>Item 2</div>
  </div>
  <div class='o-grid__item'>
  <div class='fpo'>Item 3</div>
  </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid__item--gutter-2 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

o-grid__item--gutter-8

Modify the width of a gutter between an individual grid item and the next one to that of 8 base rhythm units.

Do not set item-level gutter modifiers on items in the last column of a grid.

  • $jigsass-grid-gutter-modifiers: Specifies the gutter-width modifiers that can be generated. A map of modifiers, where each key is a modifier's name and value is a unitless numbers denoting amounts of rhythm units to serve as gutter-width in each modifier.

Usage example:

  <!-- In HTML -->
  <section class='o-grid'>
  <div class='o-grid__item'>
  <div class='fpo'>Item 1</div>
  </div>
  <div class='o-grid__item o-grid__item--gutter-8'>
  <div class='fpo'>Item 2</div>
  </div>
  <div class='o-grid__item'>
  <div class='fpo'>Item 3</div>
  </div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid__item--gutter-8 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

o-grid__item--X-of-12

Set the width of a grid item as a ratio of X parts of 12 columns.

All JigSass Grid elements (grid cotainer, grid item and all their modifiers) are completly responsive using JigSass MQ and the breakpoints defined in [$jigsass-breakpoints] (https://txhawks.github.io/jigsass-tools-mq/#variable-jigsass-breakpoints)`, though the most common use case is with item-width modifiers.

Based on the arguments passed to the jigsass-grid-item mixin, responsive modifiers are generated according to the following logic: .o-grid__item--modifier-[-from-{breakpoint-name}][-until-{breakpoint-name}][-misc-{breakpoint-name}]

So, assuming the medium, large and landscape breakpoints are defined in $jigsass-breakpoints as 600px, 1024px and (orientation: landscape) respectively, @include jigsass-grid-item(1-of-12) will generate the .item-class--1-of12 class, which is the default, and is not limitted to any media-query.

@include jigsass-grid-item(1-of-12, $until: medium) will generate the .item-class--1-of12--until-medium class, which will go into effect at (max-width: 37.49em) and will override styles in the default class until that point.

@include jigsass-grid-item(1-of-12, $from: large, $misc: landscape) will generate the .item-class--1-of12--from-large-when-landscape class, which will go into effect at (min-width: 64em) and (orientation: landscape) and will override styles in the default class from that point on.

Regardless of how many times a class is included, or where, it will only be generated once, where jigsass-objects-grid was imported, leaving us with a css file as small as possible, and a predictable cascade.

  • $jigsass-grid-cols (defalut: 12): Holds a list of unitless numbers, each number is an available column count. E.g., if $jigsass-grid-cols: 10 12;, you will be able to create x-of-10 and x-of-12 classes.

Usage example:

  <!-- In HTML -->
  <section class="o-grid">
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--11-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--1-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--2-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--10-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--9-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--3-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--4-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--8-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--7-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--5-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--6-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--6-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--5-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--7-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--8-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--4-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--3-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--9-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--10-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--2-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--1-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 o-grid__item--11-of-12--from-medium"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--12-of-12 "><div class="fpo"></div></div>
    </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is enabled
  .o-grid__item--6-of-12 {
    flex-basis: 50%;
    max-width: 50%;
  }

  // When `$jigsass-grid-flexbox-fallback` is set to `no-flexwrap`
  .no-flexwrap .o-grid__item--6-of-12 {
    width: 50%;
  }

  // When `$jigsass-grid-flexbox` is disabled
  .o-grid__item--6-of-12 {
    width: 50%;
  }

o-grid__item--offset-X-of-12

Offset a grid item by X of 12 columns.

  • $jigsass-grid-cols (defalut: 12): Holds a list of unitless numbers, each number is an available column count. E.g., if $jigsass-grid-cols: 10 12;, you will be able to create x-of-10 and x-of-12 classes.

Usage example:

  <!-- In HTML -->
  <section class="o-grid">
          <div class="o-grid__item o-grid__item--1-of-12 o-grid__item--offset-11-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--2-of-12 o-grid__item--offset-10-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--3-of-12 o-grid__item--offset-9-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--4-of-12 o-grid__item--offset-8-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--5-of-12 o-grid__item--offset-7-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--6-of-12 o-grid__item--offset-6-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--7-of-12 o-grid__item--offset-5-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--8-of-12 o-grid__item--offset-4-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--9-of-12 o-grid__item--offset-3-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--10-of-12 o-grid__item--offset-2-of-12"><div class="fpo"></div></div>
          <div class="o-grid__item o-grid__item--11-of-12 o-grid__item--offset-1-of-12"><div class="fpo"></div></div>
    </section>

CSS output:

  // --- CSS --- //
  // When `$jigsass-grid-flexbox` is disabled
  .o-grid__item--6-of-12 {
    margin-(left|right): 50%;
  }

o-grid__item--gutter-rule-1

Set a gutter rule on a grid item, visually setting it apart from the preciding grid item.

  • $jigsass-grid-gutter-rules: Specifies styles for column rule modifiers
    A map where each key is a modifier's name, and its value is the border style to apply to that modifier's column rule.

Usage example:

  <!-- In HTML -->
  <section class='o-grid o-grid--equal-height'>
  <div class='o-grid__item'><div class='fpo fpo--b'>No rule</div></div>

  <div class='o-grid__item o-grid__item--gutter-rule-1'>
    <div class='fpo fpo--b'>Has rule</div>
  </div>

  <div class='o-grid__item'><div class='fpo fpo--b'>No rule</div></div>
  </section>

CSS output:

  // --- CSS --- //
  .o-grid__item--gutter-rule-1 {
    // Create positioning context for column rule pseudo element
    position: relative;

    .o-grid__item--gutter-rule-1:before {
      border-left: 1px solid #ccc;
      bottom: 0;
      content: '';
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
    }
  }