Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

Grid CSS - Responsive Web Design

I am watching some of the Smells Like Bakin website videos for Responsive Web Design and cannot seem to find where the trainers discuss this method of grid_1, grid_2, etc.

Does anyone know where this explanation takes place?

8 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi John,

The simple grid Nick & Allison used for this project is a basic example of a grid framework. Let's go over their process – hopefully it helps...

Before Allison designed the site in Photoshop, she exported the grid png to use as a guide in her design (based on the parameters she chose). Then, her design elements were laid out according to the grid.

The total width of the design grid was 1000px and made up of 12 columns – each 65px wide with a 20px margin between each column (except for the first and last column).

In the css file, 12 ".grid_" classes were created – each representing a combination of column widths and margins. So for example, .grid_1 has its width set to 65px, or 1 column width. Then, .grid_2 is set to 2 column widths plus a margin: 65 + 65 + 20 = 150px. The .grid_3 class does the same for 3 columns of the grid, and so forth...

Once you have the grid in place, it's really simple to lay out your pages based on the columns you've set. For example, say you have 2 divs in your HTML: one is the main content div and the other is the sidebar. You can give your main content div the class ".grid_8" to take up 8 column widths, then give your sidebar div the class ".grid_4" to take up the remaining 4 column widths.

Please let me know of you have any questions – I'll be happy to help.

Mark Flavin
Mark Flavin
10,199 Points

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:

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 (http://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 (http://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 (http://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 (http://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 (http://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!

James Barnett
James Barnett
39,199 Points

@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.