Cross-platform CSS Grid System – grid.css

Preview:

Description:

A lightweight, easy-t0-use CSS only grid system designed for mobile, tablet and desktop. Fully customizable via SCSS.

How to use it:

Include the main CSS file grid.css on the webpage.

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

The basic html structure.  CSS prefixes:

• Mobile: .m (<768px)
• Tablet: .t (768px to 991px)
• Browser: .b (992px to 1199px)
• Large: .l (≥ 1200px)

<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>

The CSS classes to hide the grid cells on different screens:

• Mobile: .m-show, .m-hide
• Tablet: .t-show, .t-hide
• Browser: .b-show, .b-hide
• Large: .l-show, .l-hide

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);