Grids have been used in print design for decades and they are definitely not going anywhere. Take a look at any magazine, book or poster and after little research you will find the patterns of the grid. The reason why print designers are using grid is quite simple. It helps them to create harmony and flow of the content. They can control the final effect which will content have on you. While it may seem to you like limiting your creativity, grids can enhance it. By creating these boundaries in your design, you can unleash your fantasy and whatever the result is “pin it” on that grid. Almost every designer will tell you that constraints are good and even necessary for your work. In fact, every design has some restrictions. Let’s take a closer look.
When you are creating a web page, layout is one of the first things you have to think about. You must build some kind of structure to hold your content in proper way. This might sound easy to you, but to come up with good and unobtrusive layout is tough job. In print design it can be a little bit easier. You have one medium (book, magazine etc.) and this medium will remain the same. Web is on the other hand something completely different. Sure, you can create layout fixed to certain width and height, but you will only discourage the users and harm yourself. For this reason, you have to suit your layout to ever changing resolutions and devices out there while keeping your content legible.
Suppose you want create a very simple page like portfolio. It will be single page website with three sections. First section will be for shorter introduction or bio, second will contain showcase of your work and the last one will hold contact information. Simple and clean. You code can look like this:
<!doctype html> <html lang="en"> <head> <title>Portfolio of J. J. Carson</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav role="navigation"> <ul class="nav-ul"> <li><a href="#about">about</a></li> <li><a href="#portfolio">portfolio</a></li> <li><a href="#contact">contact me</a></li> </ul> </nav> <section id="about"></section> <section id="portfolio"></section> <section id="contact"></section> </body> </html>
This is a basic HTML5 structure you can use to create layout we talked about. I used an id’s in section tags to connect them with anchor tags. This way, when you click on one of the navigation element, it will bring you to that part (section) of the page. You can tweak this effect by adding a little JavaScript (jQuery) snippet like this:
$(function() {
$('.nav-ul').find('a').click(function() {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000); // it will take 1000 ms to get to the element
});
});
With this simple script you will add nice scrolling effect to your website. Now back to our layout. You may don’t want to organize your layout and content by using grid system because it will mean that you will have to invent it. Don’t worry about that. If you try to look on the internet, you will find plenty of various grid systems ready to use. Just pick one, download it and implement it into your website. You can do this in three ways… First is to copy and paste it into your main style sheet. Second way is to use new style sheet containing only the grid and linking to your html file with link tag or into style sheet with import rule. The third option is to paste it right into a head section of your html code as an internal style. The last one is dumbest one, so don’t use it. We will go with separate style sheet:
<head> <title>Portfolio of J. J. Carson</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/grid.css"> </head>
If you want to change any rules of the grid system it’s good to do it right in grid.css to keep the code of grid in one place. For this tutorial I chose the 16-column percentage-based grid. Feel free to use it anywhere you want.
/* Grid - 16 Columns */
.grid-1 {width: 8.3333333333333%;}
.grid-2 {width: 16.666666666667%;}
.grid-3 {width: 25%;}
.grid-4 {width: 33.333333333333%;}
.grid-5 {width: 41.666666666667%;}
.grid-6 {width: 50%;}
.grid-7 {width: 58.333333333333%;}
.grid-8 {width: 66.666666666667%;}
.grid-9 {width: 75%;}
.grid-10 {width: 83.333333333333%;}
.grid-11 {width: 91.666666666667%;}
.grid-12 {width: 100%;}
.row {clear: both;}
The principle of working with grids is very simple. The only thing you have to do is to use the classes above on individual page elements. For example, if you want to have all section next to each other, you will include the particular class name into the section element. For creating three columns with equal widths the code will look like this:
<section class="grid-3"></section> <section class="grid-3"></section> <section class="grid-3"></section>
This mean that every section will consume exactly 25% of the page. The higher the number the wider the width will be. So section with class=”grid-12″ will use whole width of the page (100%). Section with class grid-1 will take only 8.3333333333333% of the page width. It’s that simple. One warning… Always pay attention to how many elements you have and what classes do you use. For example using grid-4 class with 5 elements will cause breaking the layout. You have 12 columns in sum, so if you want to use grid-3 class, you can apply it only on four elements (12/4 = 3). With five elements the last one will be on another line. Remember to never exceed the number of columns. For five elements, you can use grid-2. Yes, there will be little remainder, but you can center the content or indent it a bit.
I hope that now you have better idea about how to use grid to create layout for your website. The benefit of percentages-based grids is they are responsive. They will adapt to any screen resolution and keep the content in tact.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
