While there are tons of resources on the topic, getting started with grid-based design can be a chore. In this exercise we’ll examine a few of the different grid Generators and implement a simple grid as the starting point for our responsive design project.
When we are done we should have a reference grid that looks like so.
Go ahead and download the grid you create and place it in the resources directory of your site. If you don’t have one it is a good idea to keep these resources where you can get to them in case you need a reference at some point in the future. Most grid generators will give you a background template like in the image above.
Extract the download folder and take the reference image and place it in your images folder. We are going to add it as a background while we set up our initial grid.