Lightweight 12-column Grid Framework – mygGrid.css

Just another 12-column Grid Framework used to create a responsive, fluid, adaptive grid system for your web project.

How to use it:

Load the core style sheet in the head section of your html document and done.

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

Basic Structure of a mygGrid grid.

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="info">.col-12</div>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <div class="info">.col-6</div>
    </div>
    <div class="col-6">
      <div class="info">.col-6</div>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="info">.col-4</div>
    </div>
    <div class="col-4">
      <div class="info">.col-4</div>
    </div>
    <div class="col-4">
      <div class="info">.col-4</div>
    </div>
  </div>
  <div class="row">
    <div class="col-3 col-sm-3">
      <div class="info">.col-3</div>
    </div>
    <div class="col-3 col-sm-3">
      <div class="info">.col-3</div>
    </div>
    <div class="col-3 col-sm-3">
      <div class="info">.col-3</div>
    </div>
    <div class="col-3 col-sm-3">
      <div class="info">.col-3</div>
    </div>
  </div>
  <div class="row">
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
    <div class="col-2 col-sm-2">
      <div class="info">.col-2</div>
    </div>
  </div>
  <div class="row">
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
    <div class="col-1 col-sm-1">
      <div class="info">.col-1</div>
    </div>
  </div>
</div>