Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

How can I make more columns than two in my gallery,?

Hi! I've just learnt how to make 2 columns of images in the gallery of my web site, but if I want to create, for example, three columns... how can I do this?(sorry for my english) Thanks, Sofia

Lady Do While
Lady Do While
6,027 Points

Ci devi far vedere cio' che vuoi fare o al meno il tuo code. Puoi fare float oppure width: 33% etc. Ce ne sono vari modi ma non riusciamo a spiegarteli meglio senza piu' info.

Samuel Allemang
Samuel Allemang
28,116 Points

I agree with Pavle that seeing your code would make it much easier to offer a solution.

However, it might be helpful to look at one of the many grid-based CSS frameworks, like the super-popular:

Looking at the code of these frameworks might help you figure out how you want to handle columns on your own site. The Treehouse course, Framework Basics, is a great introduction to using these frameworks.

1 Answer

Miguel Cano
Miguel Cano
5,181 Points
  • CSS rules for column styling are set like follows:
/* Select list items within the gallery */
#gallery li {
  float: left;  /* Floats our gallery items to the left placing one next to other (inline) */
  width: 45%;   /* For 2 columns divide by 2 the 100% of space given by the browser */ 
  margin: 2.5%; /* Sized to 2x45% leaves space to apply the 5% for margin. Half for each side */
}
  • Now for a 3 column gallery divide by 3 (33%) and subtract 3% from each list element (leaving 30%) to be able to apply a 1.5% margin per side (left-right)
#gallery li {
  float: left;
  width: 30%;
  margin: 1.5%;
}
#gallery li {
  float: left;
  width: 17%;
  margin: 1.5%;
}

Thank you! :):):):)