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

nicholastillman
nicholastillman
8,319 Points
Posted by 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>```
Steve Smith
Steve Smith
12,955 Points

Can you post the CSS for this file?

1 Answer

Steve Smith
Steve Smith
12,955 Points
Steve Smith
Steve Smith
12,955 Points

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.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

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.