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 Pete Cass
Pete Cass
16,656 Points

A 3x3 grid gallery

Hi,

I'm trying to create a fluid 3 x 3 gallery of square images.

i'm experimenting with flex box at the moment and would prefer to pursue this method.

currently i can't get the images to stay in proportion, they keep becoming stretched. should i be including something with the properties of my images?

what's an easy way to lay 9 square images out in a square grid? using flex box

thanks in advance

Serge Honderdos
Serge Honderdos
8,918 Points
Serge Honderdos
Serge Honderdos
8,918 Points

Can you make a pen of your work on Codepen

Pete Cass
Pete Cass
16,656 Points

at the moment i've got something like this http://codepen.io/Petecass/pen/ZGpoaz

Pete Cass
Pete Cass
16,656 Points

interesting, i've been using chrome. Yep just had a look on ff and it works pretty well.

However and ideas on how i can stop it from breaking at narrower widths. so that it always remains 3x3. at the moment the layout breaks up at around 680px and the images start to distort.

Serge Honderdos
Serge Honderdos
8,918 Points
Serge Honderdos
Serge Honderdos
8,918 Points

It breaks because you have set a fixed with margin. 10px margin + 30% width doesn't fit. You can fix this by using a percentage for your margin as well. For example:

You want a 3 column grid and every column has a 5% margin (2.5% left and 2.5% right). 3 times 5% margin is 15% margin in total. 100% - 15% = 85% width left for the images. 85% / 3 = 28.3333% with for each image.

in code:

img {
  width: 28.3333%;
  margin: 2.5%;
}
Pete Cass
Pete Cass
16,656 Points

nice thanks that works! however i can't seem to get the margin to affect the items vertically.

the images are nicely spaced on the x axis but stacked right on top of each other on the y axis....

Serge Honderdos
Serge Honderdos
8,918 Points
Serge Honderdos
Serge Honderdos
8,918 Points

There is a nice explanation here: http://stackoverflow.com/a/23754080

Welcome to flexbox-land ;)

Pete Cass
Pete Cass
16,656 Points

thanks serge, providing a height seems to have solved that problem.

Thanks for the help, much appreciated.