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.

CSS

nicholastillman
nicholastillman
8,319 Points

Why does the last item in the grid break to next line?

<div class="grid-container group">
          <div class="grid-3 retro-borders"><img src="img/dog.jpg" alt="" /></div>
          <div class="grid-3 retro-borders"><img src="img/dog.jpg" alt="" /></div>
          <div class="grid-3 retro-borders"><img src="img/dog.jpg" alt="" /></div>
          <div class="grid-3 retro-borders"><img src="img/dog.jpg" alt="" /></div>
 </div>```

Can you post the CSS for this file?

1 Answer

Typically this is caused by borders, padding and/or margin being applied to one or more of the contained elements and a fixed width and possibly padding being applied to the containing div.

In this case, one or all of 'grid-3' 'retro-borders' and 'img' have borders, padding and/or margin that are making the total combined pixel count to be more than will fit inside of the 'grid-container group' div 4 time evenly.

This usually isn't recommended, but I've heard of people setting border-box on all elements:

* {
  box-sizing: border-box;
}

This will alter the CSS box-model and might cause some stuff to break, but I've heard that it helps a lot with layout.