Responsive Cross-platform CSS Grid Columns System | grid.css

Pure CSS Grid System is a lightweight, easy-to-use CSS-only grid system designed for mobile, tablet, and desktop. Fully customizable via SCSS.

css grid layout, css grid 2 columns, grid template columns, can i use css grid, css grid example, css grid responsive

How to make use of it:

1. Include the grid.css main CSS file on the web page.

<link rel="stylesheet" href="grid.min.css">

2. Basic HTML structure.

<div class="container">
  <div class="row">
    <div id="sidebar" class="t2 b3 m-hide"></div>
    <div id="content" class="t10 b9">
      <div class="row">
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
        <div class="t4 b3"><div class="item">.t4 .b3</div></div>
      </div>
    </div>
  </div>
</div>

3. Customize it via SCSS:

/*
* Setting
*/
$direction       : ltr;
$columnsNumber   : 12;
$columnsPrefix   : '';
// screens        | Mobile   | Tablet  | Browser  | Large
$screensNames   : ('m',       't',      'b',       'l');
$screensSizes   : (0,         768px,    992px,     1200px);
$containerWidth : (100%,      750px,    970px,     1170px);

Columns

ScreenClass PrefixScreen Size
Mobile.m<768px
Tablet.t768px to 991px
Browser.b992px to 1199px
Large.l≥ 1200px
Screen123456789101112
Mobile.m1.m2.m3.m4.m5.m6.m7.m8.m9.m10.m11.m12
Tablet.t1.t2.t3.t4.t5.t6.t7.t8.t9.t10.t11.t12
Browser.b1.b2.b3.b4.b5.b6.b7.b8.b9.b10.b11.b12
Large.l1.l2.l3.l4.l5.l6.l7.l8.l9.l10.l11.l12

Visibility

ScreenVisibleHidden
Mobile.m-show.m-hide
Tablet.t-show.t-hide
Browser.b-show.b-hide
Large.l-show.l-hide

Container Width

ScreenScreen WidthContainer Width
Large1200px or higher1170px
Browser992px to 1199px970px
Tablet768px to 991px750px
MobileLess than 768px100%

Customize by SASS

VariableTypeDefault Value
$directionStringltr
$columnsNumberInteger12
$screensNamesArray(‘m’, ‘t’, ‘b’, ‘l’)
$screensSizesArray(0, 768px, 992px, 1200px)
$containerWidthArray(100%, 750px, 970px, 1170px);
$columnsPrefixStringEmpty

Cross-platform CSS Grid System Plugin/Github


See Demo And Download

Official Website(m-reda): Click Here

This superior jQuery/javascript plugin is developed by m-reda. For extra advanced usage, please go to the official website.

Share