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

melissa brown
melissa brown
4,670 Points
Posted by melissa brown
melissa brown
4,670 Points

making a grid

Hi does anyone know how I make the 9 boxes line up against each other and form a 9 squared grid. http://codepen.io/mbrwn/pen/EVjjJL i originally achieved it in this code http://codepen.io/mbrwn/pen/GJajwN but when i added the pictures and paragraphs it broke the format. I want to achieve flipping grid animation so i need the pictures and paragraph section in the small grids

3 Answers

Marco Boretto
Marco Boretto
29,821 Points
Marco Boretto
Marco Boretto
29,821 Points

I would use bootstrap and do something like this:

<div class="container">
  <div class="row">
    <div class="col-md-4">content of the 1-columnof the 1-row</div>
    <div class="col-md-4">content of the 2-columnof the 1-row</div>
    <div class="col-md-4">content of the 3-columnof the 1-row</div>
  </div>
  <div class="row">
    <div class="col-md-4">content of the 1-columnof the 2-row</div>
    <div class="col-md-4">content of the 2-columnof the 2-row</div>
    <div class="col-md-4">content of the 3-columnof the 2-row</div>
  </div>
  <div class="row">
    <div class="col-md-4">content of the 1-columnof the 3-row</div>
    <div class="col-md-4">content of the 2-columnof the 3-row</div>
    <div class="col-md-4">content of the 3-columnof the 3-row</div>
  </div>
</div>

you can add the bootstrap.css by CDN directly in the <head> as explained in the link I posted above and then modify all the styles you need in your style.css file This is a simplified way to make grids, obviously more you go deeper better your grid will look

Bram Dijkhuis
Bram Dijkhuis
5,746 Points
Bram Dijkhuis
Bram Dijkhuis
5,746 Points

I think there's a problem in your html-structure. In the working pen you have thee div.right elements containing your content. In the broken pen you have just 1 div.right with another div.right nested in the first. You might want to be a bit more semantical in naming your div classes. This helps you keep your code organised, which makes styling it a lot easier.

You might also want to try to paste your code (specifically the grid part of your code) in a code editor (brackets, sublime text, webstorm) and set proper indentation to check if you're closing al the divs before declaring a new right div. If I add closing divs for each div.right in your pen I get a nice working grid.