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 Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

I have 9 list items that I want to line up in rows of 3 using nth-child pseudo selector, how can I do this ?

I want it to look like

item item item item item item item item item

5 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

I think you want to float your li and then give them a max-width to reflect the number of items you want per row.

Without seeing code and your specified margins and borders this would be hard to guess but a good starting point would look something like this.

li {  --use an appropriate selector here too this is just general one
  float: left;
  max-width: 33.33%   -- this will need less if you have margins and borders on your items so lower this value if your only getting 2 per row
}
Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

you could also use flexbox methods for this also

Flexbox course

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

Setting the max-width property restricts the about of space an item can take up within its parent container.

In this example your basically saying that each li can only take up 1/3rd of the available width of its parent probably an unordered/ ordered list.

Because of this only 3 li can fit to one row this forces the items 4-6 onto the line below and 7-9 the line after.

Therefore the overall effect is you get 3 items per row with 3 rows total.

Hope that helps clarify wax-width for you.

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

thank you for your help .. but one thing. I would like to know why does the max-width alters the stacking flow. Could you explain more in depth why this works.

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

YES it does and thanks .. for some strange reason I was for sure I would have to use nth-child oh well thanks .. and happy codings.

I have another question .. for large screens, I am trying to constrict the width of the wrap div of expanding the content to only a certain percentage .. the only container that is staying to the petered size are the list items I asked u abt .. the header and footer and the pic in the header still expands along with the type inside the div that contains them.

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

forget it i figured it out ... anyway happy codings.