Skip to main content

Grid Web Design! It’s Flawless!

“The beauty of life lies within its complexity”. The world of web design is so beautiful and is getting bigger and better dynamically that in order to emulate with every concept of this industry, web designers and developer have to accept its complexity and gotta get with that.

Concerning the mobile friendly trend, responsive design is a new chapter of web industry. It is a practice of making the flexible layout that support all the modern screen sizes and gives smooth and minimalist view of the web page.it can be easily accomplish using grid web design system.

Oh please stop talking and tell me what is the grid web design?

Ok, just like any other new concept, grid web design is a practice that express a structure consist of various parallel lines, and displaying the content of the web page very manageable and elegant way. Wanna see how grid web design looks? see the picture below.

gridsystem

At this point after seen that design, you might thinking that it is just a boring concept with squarish boxy layout of late 1960 but, believe me styling it with css makes it so elegant that you will fall in love with your design and the very first reason of that is responsiveness.

As a web designer you may came across the word “print-design”. Grid was the main structure that has been used to implement the print design. However in modern web design technique grid system provide flexibility and readability of the web page. Grid web design system emphasis on user experience. As a reader i love the website that has beautiful layout and make a sense of consistency and uniformity of the content throughout the web page.

In short, grid web design system is a technique that can level up the responsive design very efficiently and the site called buggy-broken can be cured with this beautiful concept. This image shows that how accurately all the elements can be adjusted with the help of grid.

term-grid-systems

Oh so nice of you that you have showed the concept of grid web design, but dude why would we use grid web design system instead of pixel based coding?

Fair enough!i had the same kind of question when i was just starting out for grid web design and googling like “what is grid web design”, “how to implement grid web design”. There are couple of reason that draw my attention towards the grid system.

1) It’s very easy to learn(i guess i should not use the word very, but it’s not that so hard!)you just have to got into the math situation for a while.

2) It’s not time consuming, you just have to code a little bit to make your web page delightful and rest of the time you can spend on your video games.

3) Every elements are organized so perfectly that it provides the elegant and clean look of the web page , that is very compelling.

Grid web design is based on the concept of percentage over pixel, that’s why you can get an error free code, if you pay little extra attention while coding your site.

Ok fine! fabulous concept. Where is the demo?

First, i’d be using simple blog layout as it contain 2 column: main-content and sidebar. Let’s say you have a scale of 1m, and you want to divide that scale in ratio, that consist the math-situation like (2/3)+1/3=1. 2/3 for main-content and 1/3 for sidebar. To get the exact width just multiply 100 with both the fraction.


<div class="grid grid-pad">
  <div class="box-2-3">
    <div class="module">
    </div>
  </div>
  <div class="box-1-3">
    <div class="module">
    </div>
  </div>
</div>


.box-2-3 {
       width: 66.66%;
      }
.box-1-3 {
       width: 33.33%;
      }
.module {
       padding: 20px;
       background: #eee;
      }
.grid-pad {
       padding: 20px 0 20px 20px;
      }
.grid-pad [class*='box-']:last-of-type {
       padding-right: 20px;
      }
.grid {
       background: white;
       margin: 0 0 20px 0;
      }
.grid:after {
       content: "";
       display: table;
       clear: both;
      }
[class*='box-'] {
       float: left;
       padding-right: 20px;
      }
.grid [class*='box-']:last-of-type {
       padding-right: 0;
      }

This was the simple blog layout with two block, now what if you want more than two blocks. Then you just have to make a box- percentages as per the block size.

simply for 12 box grid use:


.box-1 {
  width: 100%;
}
.box-1-2{
  width: 50%;
}
.box-1-4{
  width: 25%;
}
.box-1-5{
  width:20%;
}
.box-1-6{
  width: 16.66%;
}
.box-1-7{
  width: 14.28%;
}
.box-1-8{
  width: 12.5%;
}
.box-1-9{
  width: 11.11%;
}
.box-1-10{
  width: 10%;
}
.box-1-11{
  width: 9.09%;
}
.box-1-12{
  width: 8.33%;
}

Use of media query will get the desired and responsive look on mobile and tablet devices. Here’s the code that i have used in the demo of this article :


@media only screen and (max-width: 1200px){
.box-1-12{
width: 16.66%;
}
}
@media only screen and (max-width: 700px){
.box-1 {
  width: 100%;
}
.box-1-2{
  width: 100%;
}
.box-1-3 {
width: 100%;
}
.box-1-4{
  width: 100%;
}
.box-1-5{
  width:100%;
}
.box-1-6{
  width: 100%;
}
.box-1-7{
  width:100%;
}
.box-1-8{
  width: 100%;
}
.box-1-9{
  width: 100%;
}
.box-1-10{
  width: 100%;
}
.box-1-11{
  width: 100%;
}
.box-1-12{
  width: 100%;
}
.box-2-3 {
width: 100%;
}
}

Chekout the demo

 

Well, the key for this concept is practice, so keep your hands dirty and practice couple of more times with different layouts, and you will get your claws over it. Good luck!

  • Ravinder Singh Tanwar

    All in all, this grid format makes your website to mold into a responsive website easily and without any extra efforts. The coder only have to give the individual grids the place when they will be seen from a mobile or a tablet of variable screen size.

    • Prakash Nakrani

      Ya, use of css media query will get you there while designing for mobiles and tablets, i had implemented the media query in the demo page.

  • Jim G

    I talked to you before on Twitter a few days ago or so about CSS media inquiries, but I forgot to ask if you have a Github account and if so, do you have this grid’s code in a repo?

    • Prakash Nakrani

      hello Jim actually i haven’t made my github account, but i will make it just in few days as i am working on a web project from couple of days. I will mention you in twitter. You can give the link of your account, so i can fork you on github.

    • Jim G

      Ok cool. My account is github.com/jcgallaher

  • Hello, everything is going nicely here and ofcourse every one is sharing data, that

  • Much on this depends upon the kind of foods you’re eating,
    when you are eating them and also the amount and type of
    exercise you’re doing. I won’t pry them out of the hands of the preschooler on the park.

    Everything sounds simple so far, but it is just not because how do you
    know the calories you are consuming.