CSS reference - Bifrost

Bifrost CSS Grid

The .bfl-grid class applies a CSS Grid with a single column, and 12px gap between rows.

<div class="bfl-grid">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<div class="bfl-grid">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

Columns

You can configure number of columns (default 1) through the --bfl-columns custom property.

Two columns for all screens

Inline style

<div class="bfl-grid" style="--bfl-columns: 2">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<div class="bfl-grid" style="--bfl-columns: 2">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

CSS selector

<style>
  .my-grid {
    --bfl-columns: 2;
  }
</style>

<div class="bfl-grid my-grid">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<style>
  .my-grid {
    --bfl-columns: 2;
  }
</style>

<div class="bfl-grid my-grid">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

One column up to 600px, three for wider

<style>
  @media (min-width: 600px) {
    .my-grid-one {
      --bfl-columns: 3;
    }
  }
</style>

<div class="bfl-grid my-grid-one">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<style>
  @media (min-width: 600px) {
    .my-grid-one {
      --bfl-columns: 3;
    }
  }
</style>

<div class="bfl-grid my-grid-one">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

Two columns up to 960px, four for wider

<style>
  .my-grid-two {
    --bfl-columns: 2;
  }
  @media (min-width: 960px) {
    .my-grid-two {
      --bfl-columns: 4;
    }
  }
</style>

<div class="bfl-grid my-grid-two">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<style>
  .my-grid-two {
    --bfl-columns: 2;
  }
  @media (min-width: 960px) {
    .my-grid-two {
      --bfl-columns: 4;
    }
  }
</style>

<div class="bfl-grid my-grid-two">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

Span columns

You can use grid-column: span [number] to span multiple columns.

<style>
  @media (min-width: 600px) {
    .my-grid-three {
      --bfl-columns: 3;
    }
    .my-wide-element {
      grid-column: span 2;
    }
  }
</style>

<div class="bfl-grid my-grid-three">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="my-wide-element bfc-base-3-bg bf-padding">
    This content spans two columns for 600px screens and wider
  </div>
</div>
<style>
  @media (min-width: 600px) {
    .my-grid-three {
      --bfl-columns: 3;
    }
    .my-wide-element {
      grid-column: span 2;
    }
  }
</style>

<div class="bfl-grid my-grid-three">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="my-wide-element bfc-base-3-bg bf-padding">
    This content spans two columns for 600px screens and wider
  </div>
</div>

Element

This content spans two columns for 600px screens and wider

Span rows

You can use grid-row: span [number] to span multiple rows, depending on the order of the elements in the DOM.

<style>
  @media (min-width: 600px) {
    .my-grid-four {
      --bfl-columns: 2;
    }
    .my-tall-element {
      grid-row: span 2;
    }
  }
</style>

<div class="bfl-grid my-grid-four">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="my-tall-element bfc-base-3-bg bf-padding">
    This content spans two rows for 600px screens and wider
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<style>
  @media (min-width: 600px) {
    .my-grid-four {
      --bfl-columns: 2;
    }
    .my-tall-element {
      grid-row: span 2;
    }
  }
</style>

<div class="bfl-grid my-grid-four">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="my-tall-element bfc-base-3-bg bf-padding">
    This content spans two rows for 600px screens and wider
  </div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

This content spans two rows for 600px screens and wider

Element

Custom gap

You can configure the gap spacing (default 12px) through the --bfl-gap custom property.

<div class="bfl-grid" style="--bfl-gap: 40px">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<div class="bfl-grid" style="--bfl-gap: 40px">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

Custom positioning

If re-arranging the DOM structure isn't feasible you can combine grid-row and grid-column to place an element anywhere you want. All other elements will be placed in other unoccupied areas of the grid by default.

Read more about css grid terminology.

<style>
  @media (min-width: 600px) {
    .my-grid-five {
      --bfl-columns: 2;
    }
    .my-tall-element-two {
      /* place at grid row line 1 (top) and span all the way to grid line 4 (bottom) */
      grid-row: 1 / 4;
      /* place at grid column line 2 (center) */
      grid-column: 2;
    }
  }
</style>

<div class="bfl-grid my-grid-five">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="my-tall-element-two bfc-base-3-bg bf-padding">
    For 600px+ this content spans three rows, and is placed as last element in
    the DOM. For mobile screens it will appear at the bottom.
  </div>
</div>
<style>
  @media (min-width: 600px) {
    .my-grid-five {
      --bfl-columns: 2;
    }
    .my-tall-element-two {
      /* place at grid row line 1 (top) and span all the way to grid line 4 (bottom) */
      grid-row: 1 / 4;
      /* place at grid column line 2 (center) */
      grid-column: 2;
    }
  }
</style>

<div class="bfl-grid my-grid-five">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="my-tall-element-two bfc-base-3-bg bf-padding">
    For 600px+ this content spans three rows, and is placed as last element in
    the DOM. For mobile screens it will appear at the bottom.
  </div>
</div>

Element

For 600px+ this content spans three rows, and is placed as last element in the DOM. For mobile screens it will appear at the bottom.

Sandbox

Copy/paste code from examples above, and tinker with the code to see the results yourself :)

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bfl-grid my-grid bf-page-padding">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="my-wide-element bfc-base-3-bg bf-padding">
    This content spans two columns for 600px screens and wider
  </div>
</div>

Open Sandbox