A super-lightweight, responsive, 8-column grid based on box-sizing.
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.
<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>
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+.