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 Sofia Varesio
Sofia Varesio
635 Points

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
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
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
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%;
}
Sofia Varesio
Sofia Varesio
635 Points

Thank you! :):):):)