❤
npm
Sign UpSign In

responsive-css-grid

1.0.6 • Public • Published

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)

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.62latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.62
1.0.50
1.0.41
1.0.32
1.0.20
1.0.11
1.0.00

Package Sidebar

Install

npm i responsive-css-grid

Repository

github.com/AllThingsSmitty/responsive-css-grid

Homepage

github.com/allthingssmitty/responsive-css-grid

Weekly Downloads

6

Version

1.0.6

License

MIT

Last publish

Collaborators

  • allthingssmitty
Try on RunKit
Report malware