Welcome to the Treehouse Community
Looking to learn something new?
Ben Taylor902 Points
Responsive Nested Question
Quick one for you.. I want to nest some divs responsively and I can't get my head around it..
I'm using the code from the Treehouse tutorial, so I currently have..
<div class="container"> <div class="grid_7 alpha"> </div> <div class="grid_5 omega"> </div> </div>
Now I want to put 2 divs inside grid_7, one 3 spaces and one 4 spaces, with the generic margin in between.
So in the overall 12 grid, the two divs I'd want to put in would be grid_3 and grid_4.. but obviously it's different being nested into grid_7.
Can anyone tell me the best way to do this?
Ian HempsellCourses Plus Student 37,027 Points
Hey Ben, I would suggest watching Guil's CSS Layout Techniques Deep Dive, in particular the Grid Layout section: http://teamtreehouse.com/library/css-layout-techniques
Guil explains really well how to create a responsive grid that doesn't need the alpha/omega classes adding.
You should be able to use something like this:
<div class="container"> <div class="grid-7"> <div class="grid-5">CONTENT</div> <div class="grid-7">CONTENT</div> </div> <div class="gird-5">CONTENT</div> </div>
Do you need to nest the columns into the first grid-7 column? Could you use grid-4/grid-4/grid/4 to achieve your 3 column page? It would make the stacking on smaller viewports easier ;o)
Hope this helps, Ian.
PS: when nesting, the grids still need to add up to 12. So, within your grid-7 parent column you would use grid-6/grid-6 for two equal child columns.