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>

Comments

  1. II would love to see more code examples 😀

  2. Hi There

    Is there a way/solution to use Zerogrid, or one template from zerotheme.com and build a menu with submenu?

    If Yes, how I can do it?

    Kindly Simon

  3. Sanjay Oza says:

    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.

  4. Really nice, easy to use and this is recommended for fresh learner.

  5. Thats cool, thnx alot for sharing this

  6. it’s really great it’s easy to learn i would like to say thanks

  7. really cool responsive template with full cuztomizable too.. thanks pal.

  8. wow nice

  9. This is great, really appreciate this, great to use 🙂

  10. Alamat Palsu says:

    nice one buddy! really love it.

  11. very goooooooood thank you

  12. Nice work. Simply perfect

  13. Stefan Andersson says:

    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!

  14. Used zcafe for my new site. Easy to implement. However the contact page was a problem getting going. Leaves alot to be desired.

  15. I relished looking over this, i’ll be looking at far more of your respective site along with anticipate looking at
    much more later on. Many thanks.

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

  17. i need some examples by css please

  18. Sadaf Mehmood says:

    i need this plugin with filters

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

Speak Your Mind

*

Pinterest