grid system example

When you are designing your web site you can arrange your media in a grid system. A grid system is a system of horizontal and vertical lines that intersect and form a concise and readable structure for you website. This makes your design more attractive and easy to read with clearly defined areas that represents each article or image.

Using a grid system has been happening for a very long time in print publications but just recently is making an impact for the online web design market. Many CSS grid framework designs have been developed over the past couple of years making it the new standard for web design. The grid design provides a consistency to your website.

This makes it easier to read and follow from one design element to the next. A grid system is not necessarily the only way to go with your wed design project. Since the grid design will be invisible to your readers after you set it up, it’s ok to change it up a bit. Grid systems allow you to design in a flexible proportionate manner and utilize all the different elements of your design appropriately. You will want familiarity and uniformity with your design and a grid system provides that.

Even though the grid system is a well thought out web design element, it can feel a bit stifling and restrictive of creativity. Thus, meaning that you need to think outside the box more. Play around with the design and see what you can fit into the current grid structure. If you feel you need to change it up then reconsider the current grid design.

Grid designs involve a lot of math and calculating, they can seem pretty hard for a beginner. Once you wrap your head around the structure of a grid design you will be able to understand the design elements of a grid much better. Try doing an overlay of your design on top of your grid system and make sure everything works. If it doesn’t then adjust till it fits.

This is not something that will be simple and easy, it will take time to get right and once perfect it will be worth the effort. Grid systems are lots of work and lots of math but with a little bit of hard work and organization you can work it out to be a beautifully streamlined, clean web design with everything in its place.

Some great grid systems include;

  • 960 Grid System
  • Golden Grid System
  • Zurb Foundation
  • Bootstrap
  • 1200px Grid System

There are many types out there, just search "grid frameworks" in google and see what comes up.