Positioning every second row of my hexagon grid differently?

Question

How do I place every second row to fit in with the top row in my hexagon grid? I used nth-of-type to create the equal spacing but now I need to somehow manage to target all hexagons of every second row. I could change my html markup but prefer to keep things clean with nth-of-type or nth-child.

http://codepen.io/anon/pen/QweBra

First css for spacing works.

#categories li:nth-of-type(1n+1){
  margin:0 1em;
}
#categories li:nth-of-type(6n+6){
  margin:2em 9em;
}

possible duplicate of [Responsive grid of hexagons](http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons) — TylerH, Apr 15 '15 at 19:54

Sindre Bøyum · Answer 1 · 2015-04-15T20:23:41.340

0

You could wrap every row in another div, and then move every #category div:nth-of-type(2n) to where you wanted them.

edited Apr 15 '15 at 20:23

answered Apr 15 '15 at 19:54

Sindre Bøyum

35
5

I thought of doing that too. Seems the best way – CarlosMaros Apr 15 '15 at 20:16

score 0 · Answer 2 · answered Apr 15 '15 at 19:56

Short of adding something like this to your CSS (while it uses nth-of-type, it's not really "clean"), you'd need to re-organize your markup, or use JavaScript.

#categories li:nth-of-type(6), #categories li:nth-of-type(7), #categories li:nth-of-type(8), #categories li:nth-of-type(9), #categories li:nth-of-type(10){
    position: relative;
    top: -40px;
    left: 95px;
}

#categories li:nth-of-type(11), #categories li:nth-of-type(12) {
    position: relative;
    top: -80px;
}

There is most likely a JavaScript library that exists for this (several, probably).

Positioning every second row of my hexagon grid differently?

2 Answers2