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.
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
<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
<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
<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
<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>
II would love to see more code examples 😀
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
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.
Really nice, easy to use and this is recommended for fresh learner.
Thats cool, thnx alot for sharing this
it’s really great it’s easy to learn i would like to say thanks
really cool responsive template with full cuztomizable too.. thanks pal.
wow nice
This is great, really appreciate this, great to use 🙂
nice one buddy! really love it.
very goooooooood thank you
Nice work. Simply perfect
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!
solved, forget it 🙂
Any chance you could post your solution please.
Used zcafe for my new site. Easy to implement. However the contact page was a problem getting going. Leaves alot to be desired.
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.
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
i need some examples by css please
i need this plugin with filters
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.
is it a frame work ? like bootstrap??