It is 2015 yet I am still amazed at how difficult it is to achieve seemingly trivial things. How is it possible that with so much momentum put into advancing web standards, positioning UI elements on a page is still one of if not the most challenging task in web development?

Today a coworker showed me design he got from the designer; it involved tiling hexagons on a page…
One might immediately jump to the conclusion: “oh I know, creating the hexagon is the difficult part!” No young padawan, a hexagon is really just a rectangle and two triangles… but let’s leave that for another post. We eventually figured out how to tile these hexagons, so problem solved right? Nope. Remember now boys, responsive design is pretty much a thing now, so we must withhold all prejudice against certain resolutions and enable everyone to satisfy their hexagon consumption needs.

Our solution involved tiling every other hexagon with an offset. Perfect! CSS3 has our back with nth-of-type and all the other fancy pseudo selectors. Looks good on my monitor, ship it? Except there was one problem. This solution required each row of hexagons to be even numbered. How do we ensure that wrapping only occurs on odd number of hexagons (to ensure our even numbered rows?)

We don’t. More accurately, we CAN’T. Not without JavaScript at least. Good God.

If anyone is reading this and have found a solution, please let me know. This would make me a much happier man.


Edit: (July 15th, 2015).

After sleeping on this problem, I figured that one solution would be to wrap each pair of hexagons inside an inline-block element. Ugh.