Inline Block Grid

Simple grid system built with display: inline-block. For more about how this technique works, read the blog post.

Install

Several ways to do this. Two are listed below:

NPM Install It

npm install inline-block-grid --save-dev

If you do it this way, you can use with node-sass. Just use --include-path node_modules/inline-block-grid/.

Drag and Drop It

1. Go to the releases page.
2. Click the button to download a zip.
3. Decompress and drop in your SCSS folder.

Plain CSS

The grid is also built to a plain css file, so if you aren't using sass or don't need any customization you can simply grab grid.css and add it to your project.

Use

Whatever install method you used, now you can just:

@import 'inline-block-grid';

This will give you all the classes to start using the grid in your html.

Examples

A simple two column layout would be as follows:

<div class="block-grid">
  <div class="column-6">
    ... some stuff
  </div>
  <div class="column-6">
    ... some other stuff
  </div>
</div>

Or a typical sidebar layout:

<div class="block-grid">
  <div class="column-2 post-1"></div>
  <div class="column-9"></div>
</div>

Or how about a product grid:

<div class="block-grid align-center">
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
  <div class="column-3"></div>
</div>

Class Reference

| class | description | | ----- | ----------- | | .block-grid | Wrap around columns (required) | | .column-X | Amount of columns element should span (1-12) | | .pre-X | Apply margin-left of X columns | | .post-X | Apply margin-right of X columns | | .align-right | Column group should right align orphan columns | | .align-center | Column group should center orphan columns | | .align-baseline | Column content aligned to baseline |

Responsive Classes

For easy responsive layouts, each class is also available with small- and medium- prefixes. For example, to create an element that is full-width on a phone, half-width on a tablet, and quarter-width on a desktop:

<div class="column-6 medium-column-12 small-column-24">
  <h1> Responsive Columns!</h1>
</div>

There are also responsive pre and post classes for spacing:

<div class="column-4 pre-12 small-pre-6 medium-pre-2"></div>

Responsive Class Reference

| class | description | | ----- | ----------- | | small-column-X | Width at small screen size | | small-pre-X | Margin left at small screen size | | small-post-X | Margin right at small screen size | | medium-column-X | Width at medium screen size | | medium-pre-X | Margin left at medium screen size | | medium-post-X | Margin right at medium screen size |

Customization

If you are using sass, you can customize several aspects of the grid:

| Variable | Description | Default | | -------- | ----------- | ------- | | $column-count | Number of columns in the grid | 12 | | $gutter | Amount of space between the columns | 1rem | | $font-reset | Default font family for your project | sans | | $size-small | Small size breakpoint | 480px | | $size-medium | Medium size breakpoint | 960px |

License

©Paul C Pederson 2015 under the Fair License

Usage of the works is permitted provided that this instrument is retained with the works, so that any entity that uses the works is notified of this instrument.

DISCLAIMER: THE WORKS ARE WITHOUT WARRANTY.