Grid CSS - Responsive Web Design

John the reasons for using a grid will vary from project to project but essentially it is going to be to ensure that your project looks consistent across browsers and to give you a framework to accurately place your elements on a page.

The grid_1, grid_2 etc.. are just classes that you can use to place your elements on the page with a high degree of accuracy. Imagine you are working with a 960px layout and want to place an element in the "approximate" middle of space. You could set the margins and padding for the element but that would get messy very quickly. Where with a grid system you could just place the element by assigning a class.

Below are some resources to explore:

• http://twitter.github.com/bootstrap/scaffolding.html
• http://960.gs/
• http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/approach/

Hi John! The grid.css file you're looking for is included with the project files that you should download at the start of the project Build a Basic Website.

All Project Files are directly on the video page. To download, go to the course video you're working through and look to the right side beneath the video player. There you will be able to download the Project Files (video files, a transcript, as well as any associated code assets).

Not every video has Project Files, and Project Files are generally updated in sequencial order so you'll need to download from the first video stage if you're working through a project. :)

I'm not sure where you are in the Website project, so here is the first stage of the Build a Basic Website course: http://teamtreehouse.com/library/websites/build-a-simple-website/website-basics/introduction-to-the-project

If you didn't get the opportunity to download the Project files at the start of the project and follow along but you need to find the current Project files, the teachers have added to the First Stage a "teacher's notes" and miscellaneous section (next to the Downloads section) that include a master package of the project files :)

Email me at help@teamtreehouse.com if you have any questions :)

Thank you for your quick response. I haven't downloaded the files for any project yet, I was more or less looking for an explanation as to why they used this approach in the website design and setup. I have not been able to see this explanation in any video, so seeing the css code will not really help me if I don't understand the "why" portion of the code. Make sense? Or did I misunderstand your response?

UPDATE: I think I found the video here

OOOOO I understand now, sorry missed that :P

Well the grid.css is used to make the Smells Like Bakin' website responsive. You can also keep the grid.css file to use on your own personal projects.

We give that to you in advance as you start with the Build a Basic Website project (https://teamtreehouse.com/library/websites/build-a-simple-website) with Nick where you download the files to begin with .... then Allison shows you how to make it responsive (https://teamtreehouse.com/library/websites/build-a-responsive-website) this is where you start using the grid.css file completely though Nick introduces it to you earlier ... after that Andrew introduces jQuery and JavaScript to the website to make it interactive (https://teamtreehouse.com/library/websites/build-an-interactive-website).

If you want the specific video where the grid.css file is first mentioned here it is (https://teamtreehouse.com/library/websites/build-a-simple-website/creating-a-website-structure/adding-grid-css) but your best bet is to follow along with the project in order to understand the context in which it is used on websites :)

Speaking of which, have you seen the Learning Adventures yet? This will help you out if you need a bit of a structured path, as this is the guidance path we suggest you follow to learn the skills you want :)

Here is one on how to become a Web Designer (https://teamtreehouse.com/learning-adventures/become-a-web-designer)

@Elizabeth - Great! Thanks for your help.

@Mark, thank you for the links and the explanation. I am wrapping my mind around it now trying to understand the grid approach. I'll check out the links and hopefully they will give some more light on it.

@Guil - Very cool! I am beginning to see the point of the grid now. Thanks!

@John - At the very end of the CSS deep dive there's a badge discussing framework foundation. The use of grids is definitely an intermediate CSS topic. Don't worry, once you finish the CSS deep dive you'll understand how they work.