sass-grids demo

Below you'll see a few examples of the grid system in action. It uses the standard configuration with 10 cells per line and a gutter width of 1em. The naming convention of the grid size classes follow natural language instead of decimal numbers for better readability. For example: A cell that takes 50% of its parent width in a grid system with up to 10 cells per row is called cell-five-tenths.

2 half width cells


<div class="grid">
  <div class="cell cell-five-tenths">
    1/2 width
  </div>
  <div class="cell cell-five-tenths">
    1/2 width
  </div>
</div>

1/2 width

Wildly mixed cell sizes

You get it ...

2/10

4/10

3/10

1/10

1/10 width

Aligning single cells

Sometimes you might want to align a single cell. To achieve that, use the classes of the corresponding examples below.


<div class="grid">
  <div class="cell cell-three-tenths">
    1/3 left
  </div>
</div>
<div class="grid">
  <div class="cell cell-three-tenths cell-right">
    1/3 right
  </div>
</div>
<div class="grid">
  <div class="cell cell-three-tenths cell-center">
    1/3 centered
  </div>
</div>

3/10 left

3/10 right

3/10 centered

Offsets

Offsets can be created by using the offset classes that follow a naming scheme similar to that of the cell size classes. Below is an example of two cells that use an offset of one quarter the width of their parent.


<div class="grid">
  <div class="cell cell-four-tenths cell-offset-two-tenths">
    1/4 width
  </div>
  <div class="cell cell-four-tenths">
    1/2 width
  </div>
</div>

1/4 width

1/2 width

Responsive sizing of cells

By default, there are 4 device classes predefined with corresponding sizing classes. The example below demonstrates this by defining 4 cells that each take a quarter of the width on desktop class devices and half the width on devices with smaller display resolutions. Resize your browser window to see how the cells change their width sizes.


<div class="grid">
  <div class="cell cell-five-tenths cell-desktop-two-tenths">
    1/2 or 1/5
  </div>
  <div class="cell cell-five-tenths cell-desktop-two-tenths">
    1/2 or 1/5
  </div>
  <div class="cell cell-five-tenths cell-desktop-two-tenths">
    1/2 or 1/5
  </div>
  <div class="cell cell-five-tenths cell-desktop-two-tenths">
    1/2 or 1/5
  </div>
</div>

1/2 or 1/5