Grid System

Overview

Responsive and fluid grid system to structure content and objects.

Easily distribute and align content and components with a simple series of containers and columns. As a flexible mobile-first (aka Responsive Web Design) grid system, content can respond to the complete range of viewport widths. For example, it could be 2 columns on a phone while being 4 columns on a desktop.

Getting Started

1. Instantiate a new grid container…

<div class="fsa-grid">...</div>

2. Add two evenly-sized columns

Each grid column’s proportional width is assigned via fsa-grid__[WIDTH]. For example: class="fsa-grid__1/2" is 50% proportion.

<div class="fsa-grid">
  <div class="fsa-grid__1/2">...</div>
  <div class="fsa-grid__1/2">...</div>
</div>

Grid Column Sizes

Available column proportions are identified via the fsa-grid__[PROPORTION] selector, where [PROPORTION] is one of the values below.

Responsive

Responsive Web Design, originally defined by Ethan Marcotte in A List Apart, responds to the needs of the users and the devices they’re using. Layout can change based on the size and capabilities of the device. For example, a phone may render content in a single column view, while screens wider than a tablet could then distribute the same content into multiple columns.

Each grid column’s proportional width can be adjusted across a range of viewport sizes (aka “breakpoints”) via fsa-grid__[PROPORTION]@[BREAKPOINT] where [PROPORTION] is one of the values documented above and [BREAKPOINT] is one of s, m, l, or xl.

In the below example, each column begins as full-width (fsa-grid__1/1) by default, and adjusts to 50% (fsa-grid__1/2@m) when the viewport is wider than the m breakpoint.

<div class="fsa-grid">
  <div class="fsa-grid__1/1 fsa-grid__1/2@m">...</div>
  <div class="fsa-grid__1/1 fsa-grid__1/2@m">...</div>
</div>

Demo

Nesting

Nesting a new grid container within a grid column is allowed and follows the same rendering behavior based on the same 12-column, responsive grid.

<div class="fsa-grid">
  <div class="fsa-grid__9/12">
    <div class="fsa-grid">
      <div class="fsa-grid__4/12">...</div>
      <div class="fsa-grid__4/12">...</div>
      <div class="fsa-grid__4/12">...</div>
    </div>
  </div>
  <div class="fsa-grid__3/12">...</div>
</div>

No Gutter

<div class="fsa-grid fsa-grid--no-gutter">
  <div class="fsa-grid__1/3">...</div>
  <div class="fsa-grid__1/3">...</div>
  <div class="fsa-grid__1/3">...</div>
</div>

Auto-width

A grid column’s width can automatically distribute itself via class="fsa-grid__auto". For example, if you have two colums of variable width, e.g. 1/6 and 1/4, then grid unit with fsa-grid__auto will flex itself to the remaining space.

<div class="fsa-grid">
  <div class="fsa-grid__1/6">...</div>
  <div class="fsa-grid__auto">...</div>
  <div class="fsa-grid__1/4">...</div>
</div>

Auto-width: sample 1

<div class="fsa-grid">
  <div class="fsa-grid__auto">...</div>
  <div class="fsa-grid__1/4">...</div>
</div>

Auto-width: sample 2

<div class="fsa-grid">
  <div class="fsa-grid__auto">...</div>
  <div class="fsa-grid__auto">...</div>
  <div class="fsa-grid__auto">...</div>
</div>

Sass Mixins

Homeroll your own semantic grids.

Demo

<!-- HTML  -------------------------------------------------------------------->
<div class="foo">
  <div class="foo__item foo__item--fu">...</div>
  <div class="foo__item foo__item--bar">...</div>
</div>

////////////////////////////////////////////////////////////////////////////////
// SCSS
// 1. Start a grid...
.foo {
  @include fsa-grid-row();
}

// 2. Create your columns
.foo__item {
  @include fsa-grid-column();
}

// 3. Give each column a proportion (out of 12 columns)
.foo__item--fu {
  @include fsa-grid-column-width(3); // 25%
}

.foo__item--bar {
  @include fsa-grid-column-width(9); // 75%
}

Demo: Responsive

Let’s use Media Queries to adjust the layout for different viewport sizes.

<!-- HTML  -------------------------------------------------------------------->
<div class="lorem">
  <div class="lorem__item lorem__item--fu">...</div>
  <div class="lorem__item lorem__item--bar">...</div>
</div>

////////////////////////////////////////////////////////////////////////////////
// SCSS
// 1. Start a grid...
.lorem {
  @include fsa-grid-row();
}

// 2. Create your columns
.lorem__item {
  @include fsa-grid-column();
}

// 3. Give each column a proportion (out of 12 columns)
.lorem__item--fu {

  @include fsa-grid-column-width(6); // 50%

  @include breakpoint(M) {
    @include fsa-grid-column-width(4); // 33%
  }

}

.lorem__item--bar {

  @include fsa-grid-column-width(6); // 50%

  @include breakpoint(M) {
    @include fsa-grid-column-width(8); // 66%
  }

}