Easy start

Mobile first

Lightweight

Preprocessors

PSD file

How Simple Grid 1.9 works

It is very simple, responsive grid system that you can use in your projects. Any style, any design. Just grid! The basis of the grid is a container with a width of 84% (max-width: 1200px) of the width of the screen for desktop or 96% for mobile. This container is divided into 12 columns. So no matter what device, your website will be broad at 84% (max-width: 1200px) or 96%. Always!

  • Rows must be placed within a .container (for mobile 96% and for desktop: width: 84%, max-width: 1200px) or .container-fluid (100% width).
  • It uses .row to determine the horizontal column groups.
  • Columns (eg .col-6, .col-8) must be in .row. This is a must!
<div class="container">

   <div class="row">
      <div class="col-1">
         <!-- This content will take up 1/12 of the container -->
      </div>
      <div class="col-3">
         <!-- This content will take up 3/12 of the container -->
      </div>
      <div class="col-8">
         <!-- This content will take up 8/12 of the container -->
      </div>
      </div>

    <div class="row">
      <div class="col-1-5">
         <!-- This content will take up 1/5 of the container -->
      </div>
      <div class="col-1-5">
         <!-- This content will take up 1/5 of the container -->
      </div>
      <div class="col-1-5">
         <!-- This content will take up 1/5 of the container -->
      </div>
      <div class="col-1-5">
         <!-- This content will take up 1/5 of the container -->
      </div>
      <div class="col-1-5">
         <!-- This content will take up 1/5 of the container -->
      </div>
    </div>

</div>