Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Blair Rorani
Blair Rorani
6,658 Points

Grid system

How do I use a grid where I have a side bar and a main column. Main column has two or more columns within it. ?

Do I nest divs with grid classes?

7 Answers

James Barnett
James Barnett
39,199 Points

@Blair -

Nest the divs & apply the grid classes.

You could do something like this: http://codepen.io/JamesBarnett/pen/labqt

James Barnett
James Barnett
39,199 Points

@Blair -

Do I nest divs with grid classes?

In general, yes. It's hard to be more specific without seeing your code.

Can you create a "working" example using codepen so we can see the bigger picture of what you are trying to do.

There's actually a whole stage on grids at the very end of the CSS Foundations course, now might be a good time to review that.

James Barnett
James Barnett
39,199 Points

A common mistake that users who are new to Treehouse make, is to go directly from the Build a Basic Website course to the Build a Responsive Website course, this skips over several foundational courses.

To view the order in which these were designed to be taken, look at the Learn HTML & CSS Learning Adventure

Blair Rorani
Blair Rorani
6,658 Points

Thanks James, I started with the basic website and then did the responsive website. I already know css. It was more how grids are implemented.

I'll checkout the css foundations stage you linked me to. I just need to see an example of how a grid is used that matches what I want to achieve.

The grids used in basic and responsive website don't have a div with nested divs. They are always side by side. If you think about this forum page. It has a main column and a side bar. What if I wanted to have two columns within this main column as well as the side bar. How would I do that using grids is my question.

I'll see what I can dig up. Thanks again.

James Barnett
James Barnett
39,199 Points

@Blair - If you are gold member there is the Fluid Grids Master Class.

Blair Rorani
Blair Rorani
6,658 Points

Got it. Thanks @James.

James Barnett
James Barnett
39,199 Points

@Blair - You're quite welcome.