Responsive CSS Grid

A super-lightweight, responsive, 8-column grid based on box-sizing.

Getting Started

You may install this plugin with this command:

npm install responsive-css-grid --save-dev

Issues with the output should be reported on the responsive-css-grid issue tracker.

Usage

<div class="container">

  <div class="row">
    <div class="col-2-3"> <!-- column is 2/3 the total width -->
      Your content
    </div>
    <div class="col-1-3"> <!-- column is 1/3 the total width -->
      Your content
    </div>
  </div>

  <div class="row">
    <div class="col-1-4"> <!-- column is 1/4 the total width -->
      Your content
    </div>
    <div class="col-1-2"> <!-- column is 1/2 the total width -->
      Your content
    </div>
    <div class="col-1-4"> <!-- column is 1/4 the total width -->
      Your content
    </div>
  </div>

</div>

Live Example

Responsive CSS grid.

Browser support

The responsive CSS grid works in the latest versions of:

Chrome
Firefox
Opera
Safari
Edge
Internet Explorer
iOS Safari
Chrome for Android

The above list is non-exhaustive. This grid works perfectly with any browser that supports box-sizing, including IE8+.

License