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

Posted by Audrey Lafarga
Audrey Lafarga
9,921 Points

CSS Grid Help

I've laid my site out to a grid: Width: 1000px # Columns : 12 Column width: 65px Gutter : 20px

I've created 3 thumbnails that i want in a row so I've made them span 4 columns each but for some reason the last thumbnail gets pushed down creating a second row. 

<div id="recent-work" class="grid_12">

        <div class="gallery-item grid_4">
        <h5>Recent Work</h5>
        <h4>Design</h4>
        <a href="#"><img src="" alt=""></a>
    </div>

    <div class="gallery-item grid_4">
        <h5>Recent Work</h5>
        <h4>Illustration</h4>
        <a href="#"><img src="" alt=""></a>
    </div>

    <div class="gallery-item grid_4">
        <h5>Recent Work</h5>
        <h4>Photography</h4>
        <a href="#"><img class="" alt=""></a>
    </div>
</div>

5 Answers

Gary Mann
Gary Mann
8,639 Points

Yup. So the way the grid applies the gutter is by leaving a 20px margin to the right of each grid class.

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 20px 10px 0;
    float: left;
    display: block;
}

But the file has an easy built in solution with the built in alpha and omega classes to get rid of the gutter.

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

So get rid of the extra 20 px gutter after your 3rd thumbnail by applying the .omega class to that thumbnail in your html. You might apply the alpha margin to the first thumbnail as well.

Audrey Lafarga
Audrey Lafarga
9,921 Points

YAY! Thank you! that works.

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

Margins/gutters/borders are pushing the width of your grid_4 + grid_4 + grid_4 to equal more than 100% of the total width. We'd need to see the css to figure this out.

A border on the thumbnail could be pushing beyond the width of grid_4 if you haven't gone with box-sizing: border-box .

The thumbnails themselves could have a fixed unit size attached to them that isn't allowing the fluidity of sizing to the width of grid_4.

The gutters could be styled in a way that is putting a gutter before your first thumbnail or after your last thumbnail. The Treehouse example solves this with the .alpha and .omega class styling in their grids.

Or you could have some margin styled in somewhere that doesn't need it.

J Sherwani
J Sherwani
248 Points
J Sherwani
J Sherwani
248 Points

Audrey,

A problem like this is most easily solved through screen sharing. If you're up for it, feel free to add me on Screenhero and we can do a live help session immediately:

http://join.screenhero.com/jcoderhelp@gmail.com

Otherwise, if you can post your code in a jsfiddle, that would be helpful too.

Audrey Lafarga
Audrey Lafarga
9,921 Points

http://jsfiddle.net/jTdt4/

i hope that works

Audrey Lafarga
Audrey Lafarga
9,921 Points
Audrey Lafarga
Audrey Lafarga
9,921 Points

YAY! Thank you! that works.

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

Cool! Does it make sense? I think it's more important that you wrap your brain around why it works than it is that it works,

Audrey Lafarga
Audrey Lafarga
9,921 Points

Yeah, totally. The grid was applying a 20px margin to the right so the width of the images plus the margin was exceeding the 1000px width and it was pushing the last image down. Applying the .omega class gets rid of the 20px margin :) Thanks again!

Gary Mann
Gary Mann
8,639 Points

Awesome.