Zerogrid – A Simple Grid System for Responsive Design

zerogrid - a simple grid system for responsive design

Nowadays, Grid system has been designers’ favorite pick to help structure and design web layouts.

Not the same as any other grid systems you find on the internet. Zerogrid is very simple, clear and easily customisable. It helps any experts or newbies can use to make a website with responsive design easily.

zerobasic

8+ Free Basic Responsive Html5 Templates with Zerogrid System

How It Works

.zerogrid

Default width is 1200px, you can change it: 960px, 980px, 1024px, … or full width (width: 100%).

.row

Splits up the page horizontally and solves floating problems.

.col-x-x

Divides the section into columns and specifies the width of the column. Using percentages means it’s 100% fluid.

.wrap-col

Determine the distance between the columns and make the contents inside the column no break the website layout.

@media only screen

Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user : Iphone, Ipad, Mobile, Tablet, TV, …

Basic HTML Structure

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/zerogrid.css" rel="stylesheet" />
  </head>
<body>
  <div class="zerogrid">
    <div class="row">
      <div class="col-2-3"><div class="wrap-col">...</div></div>
      <div class="col-1-3"><div class="wrap-col">...</div></div>
    </div>
  </div>
</body>
</html>

Example 1-1

zerogrid-1-1

<div class="zerogrid">
  <div class="row">
    <div class="col-2-3"><div class="wrap-col">...</div></div>
    <div class="col-1-3"><div class="wrap-col">...</div></div>
  </div>
  <div class="row">
    <div class="col-1-3"><div class="wrap-col">...</div></div>
    <div class="col-1-3"><div class="wrap-col">...</div></div>
    <div class="col-1-3"><div class="wrap-col">...</div></div>
  </div>
  <div class="row">
    <div class="col-1-2"><div class="wrap-col">...</div></div>
    <div class="col-1-2"><div class="wrap-col">...</div></div>
  </div>
</div>

Example 1-2

zerogrid-1-2

<div class="zerogrid">

  <div class="row">
    <div class="col-2-3">
      <div class="row">
        <div class="col-1-3"><div class="wrap-col">...</div></div>
        <div class="col-1-3"><div class="wrap-col">...</div></div>
        <div class="col-1-3"><div class="wrap-col">...</div></div>
      </div>
    </div>
    <div class="col-1-3"><div class="wrap-col">...</div></div>
  </div>

  <div class="row">
    <div class="col-1-2">
      <div class="row">
        <div class="col-2-3"><div class="wrap-col">...</div></div>
        <div class="col-1-3"><div class="wrap-col">...</div></div>
      </div>
      <div class="row">
        <div class="col-1-3"><div class="wrap-col">...</div></div>
        <div class="col-2-3"><div class="wrap-col">...</div></div>
      </div>
    </div>
    <div class="col-1-2">
      <div class="row">
        <div class="col-2-3">
          <div class="row">
            <div class="col-1-2"><div class="wrap-col">...</div></div>
            <div class="col-1-2"><div class="wrap-col">...</div></div>
          </div>
        </div>
        <div class="col-1-3"><div class="wrap-col">...</div></div>
      </div>
    </div>
  </div>

</div>

 Example 2-1

zerogrid example 2-1

<div class="zerogrid">
  <div class="row">
    <div class="col-1-3 offset-2-3"><div class="wrap-col">...</div></div>
  </div>
</div>

Example 2-2

zerogrid example 2-2

<div class="zerogrid">
  <div class="row">
    <div class="col-2-3 offset-1-3">
      <div class="col-1-2 offset-1-2"><div class="wrap-col">...</div>
    </div>
  </div>
</div>

21 thoughts on “Zerogrid – A Simple Grid System for Responsive Design”

  1. This Zerogrid is really very nice, amazing but very easy to learn & use also we can customize as we need. Thanks for this. This has helped me to create HTML5 responsive website in minutes. I would like to say other viewer also to use this Zerogrid system.

  2. Hi, I want to have a different background-color in one of my wrap-col’s, instead of the default white Ill like to have lightgray as text background.. #E6E6E6 but I just can’t figur out how to make it happens…. any suggestion?
    TIA!

  3. Hi,
    I using your zerotheme framework for design custome website. I appreciate the lovely framework.

    I Request Please provide some update versions and specially form fields samples. So designer can easly design form page.

    Thanks

    Regards
    Manmohan

  4. Zerogrid works great. I recently converted our static website to a responsive design site with Zerogrid. I have been recommending it to others. It is so simple to use, everyone should be using it.

Leave a Reply

Your email address will not be published. Required fields are marked *