Rachel S Rachel S - 4 months ago 16
jQuery Question

Add space on top of second row of divs in a grid

I'm using Bootstrap and have a bunch of boxes in a grid shape (think of a store's items search result page). I want there to be space on top of all the item boxes except for those on the first row. It's hard to do with CSS because they stack differently depending on the viewport size.

I've tried adding a margin top to ALL of them but then I have the space on the top row, too. I would work with that if there was no other option but I'm wondering if there's a better way.

enter image description here

And here's a bootply to work with.

Answer

A less utilized option is to style the nth item, which can take a formula or keywords like odd or even. So, to skip the first two items and decorate all the rest with a bit of CSS, you could do:

.row div {height:50px; background-color:grey; padding:10px; margin:0 10px;}

.row div:nth-child(n + 3) { margin-top: 10px;}