Skip to content

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

License

Notifications You must be signed in to change notification settings

AllThingsSmitty/responsive-css-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Responsive CSS Grid

NPM version

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

The MIT License (MIT)

Releases

No releases published

Packages

No packages published

Languages