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 danielcroft
danielcroft
7,438 Points

Making a grid of images responsive

Hi guys im just testing my skills making a HTML/CSS layout then i plan to make it into a WordPress theme eventually. What I'm stuck on is i have a list of image i want to put into a grid then i want to make them so they are responsive so as the screen shrinks they automatically realign them self on a new row to fit into the screen. Ive been stuck on this on an off for a couple of weeks now so thought it was time to ask for help.

What is it i need to do to first make them a gird then second make the grid responsive i think I'm wording this correctly I'm not quite sure.

Thanks in advance,

Daniel

2 Answers

Keith Wyland
Keith Wyland
10,576 Points
Keith Wyland
Keith Wyland
10,576 Points

This is only one approach and there are many.

  1. put images in an unordered list. use list-style: none on the list to get rid of the bullets and also maybe get rid of padding/margin on the list.

  2. float the list items left

Try it out, and if you're getting stuck, throw your code in a codepen. Then paste the link to your codepen here with your question.

Good luck!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's a bunch of excellent advice.

Brad L'estrange
Brad L'estrange
2,085 Points
Brad L'estrange
Brad L'estrange
2,085 Points

I use Skeleton it is very useful and not cheating.

http://www.getskeleton.com/

It has most of it there for you I usually edit there code to fit my needs but it is handy but it can also be good to read so you know the code so you could alway make one yourself.