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

Matt Lewis
Matt Lewis
5,970 Points
Posted by Matt Lewis
Matt Lewis
5,970 Points

Masonry or CSS

Hello, So far I have my post pulling in a Foundation Grid. They're appearing how they should, but I want to get rid of the spacing between the images to get the masonry effect. Do I need to use masonry.js or can this be achieved in css? Thanks!

http://hatchingbigideas.com/foundation/?page_id=58

2 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Matt, the space is made by the containing divs with a class of column having a left and right padding of 0.9375em;. I have not used foundation but suspect this is the gutter between columns in that framework.

You don't necessarily need to use a grid for the images, you could set widths for them with media query e.g. 100% (1 image across), 50% (2 images) and 25% (4 images) depending on the screen size.

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey Matt,

I think the best solution in this case is to add a class in your custom CSS, which resets the paddings of Foundation. For example:

.zero-gutter {
  padding-left: 0;
  padding-right: 0;
}

Then give it to every div with the column classes which you don't want to have gutter. Like this:

<div class="large-3 medium-6 columns zero-gutter">
  ...
</div>

OR

If you meant those vertical spaces, here is an article I found: http://w3bits.com/css-masonry/