Modern CSS Grid Layout System – CSSGridSys

Preview:

Description:

CSSGridSys is a small CSS library used for creating responsive, cross-platform, 12-column grid layout for modern web design.

Heavily based on the CSS Grid Layout.

How to use it:

Download and import the stylesheet gridsys.css into the page.

<link rel="stylesheet" href="css/gridsys.css">

Create a basic grid layout.

<section class="grid main s-col-six m-col-twelve">
  <div class="s-col-six m-col-twelve">a<p class="mob">6</p><p class="nomob">12</p></div>
  <div class="">
    b<p class="mob">1</p><p class="nomob">1</p>
  </div>
  <div class="s-col-five m-col-eleven">
    c<p class="mob">5</p><p class="nomob">11</p>
  </div>
  <div class="s-col-two m-col-two">
    d<p class="mob">2</p><p class="nomob">2</p>
  </div>
  <div class="s-col-four m-col-ten">
    e<p class="mob">4</p><p class="nomob">10</p>
  </div>
  <div class="s-col-three m-col-three">
    f<p class="mob">3</p><p class="nomob">3</p>
  </div>
  <div class="s-col-three m-col-nine">
    g<p class="mob">3</p><p class="nomob">9</p>
  </div>
  <div class="s-col-three s-offset-one m-col-four m-offset-zero">
    h<p class="mob">3, offset 1</p><p class="nomob">4</p>
  </div>
  <div class="s-col-three s-offset-two m-col-eight m-offset-zero">
    i<p class="mob">3, offset 2</p><p class="nomob">8</p>
  </div>
  <div class="s-col-three s-offset-three m-col-five m-offset-zero">
    j<p class="mob">3, offset 3</p><p class="nomob">5</p>
  </div>
  <div class="s-col-six m-col-seven">
    k<p class="mob">6</p><p class="nomob">7</p>
  </div>
  <div class="s-col-six m-col-six">
    l<p class="mob">6</p><p class="nomob">6</p>
  </div>
  <div class="s-col-six m-col-six">
    m<p class="mob">6</p><p class="nomob">6</p>
  </div>
</section>

The offset is supported as well.

<section class="grid main s-col-six m-col-twelve">
  <div class="s-col-six m-col-six m-offset-one">
    n<p class="mob">6</p><p class="nomob">6, offset 1</p>
  </div>
  <div class="s-col-six m-col-six m-offset-two">
    o<p class="mob">6</p><p class="nomob">6, offset 2</p>
  </div>
  <div class="s-col-six m-col-six m-offset-three">
    p<p class="mob">6</p><p class="nomob">6, offset 3</p>
  </div>
  <div class="s-col-six m-col-six m-offset-four">
    q<p class="mob">6</p><p class="nomob">6, offset 4</p>
  </div>
  <div class="s-col-six m-col-six m-offset-five">
    r<p class="mob">6</p><p class="nomob">6, offset 5</p>
  </div>
  <div class="s-col-six m-col-six m-offset-six">
    s<p class="mob">6</p><p class="nomob">6, offset 6</p>
  </div>
</section>