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 trialSofia Varesio
635 PointsHow 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
6,027 PointsCi 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
28,116 PointsI 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
5,181 Points- CSS rules for column styling are set like follows:
Two column gallery
/* 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)
Three column gallery
#gallery li {
float: left;
width: 30%;
margin: 1.5%;
}
Five column gallery
#gallery li {
float: left;
width: 17%;
margin: 1.5%;
}
Sofia Varesio
635 PointsThank you! :):):):)
Pavle Lucic
10,801 PointsPavle Lucic
10,801 Pointspaste the code pls