1

So here I am trying to learn how hexagons work. I currently saved a codepen which is the following:

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

modified from webtiki codepen

#categories li{
  position:relative;
  list-style-type:none;
  width:27.8em; 
  padding-bottom: 32.1em;
  float:left;
  overflow:hidden;
  visibility:hidden;

  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2){
  margin:0 1em;
}
#categories li:nth-child(6n+4){
  margin-left:0.5em;
}
#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
    margin-top: -6.9em;
  margin-bottom: -6.9em;

  -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

#categories li *{
  position:absolute;
  visibility:visible;
}
#categories li > div{
  width:100%;
  height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;

  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);

    -webkit-backface-visibility:hidden;

}

As you can see I dont understand the underlying magic behind the positioning. Eventhough my em values are the same it doesnt work out. The hexagons are displaced as opposed to the original codepen.

What is the reason?

Ok nearly getting there:

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

vals
  • 61,425
  • 11
  • 89
  • 138
CarlosMaros
  • 11
  • 5
  • I updated my answer here **[Responsive grid of hexagons](http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons/26116497#26116497)** with a way to adapt the number of hexagons per row. Although it doesn't use `em` units, it seems to be what you are looking for – web-tiki Apr 16 '15 at 12:47

1 Answers1

0

your width is too wide. 

#categories{
  overflow:hidden;
  width:80%;font-size:0.4em;
  margin:0 auto;
}

Change to:

#categories{
  overflow:hidden;
  width:50%;font-size:0.4em;
  margin:0 auto;
}

You could also put everything into a container so it doesn't overflow.

Joe Salmi
  • 79
  • 10
  • but the problem is I want it to occupy any width. Right now max seems to be 3 rows it seems – CarlosMaros Apr 15 '15 at 18:43
  • @CarlosMaros It has been styled to be responsive *as is*. If you want to change the layout, you need to change al the nth-child styles around there – vals Apr 15 '15 at 19:00
  • @vals I did try something but cant figure this out so well http://codepen.io/anon/pen/QweBra. Im familiar with nth-of-type but somehow I cant do this. – CarlosMaros Apr 15 '15 at 19:11
  • The original uses percentages for the sizes, that made it responsive in the sense of keeping always the same layout. (Not in the sense of readapting the layout to the size available). If you want the later, that can be a somewhat extensive rearrangement. (And nth-child settings won't work) – vals Apr 15 '15 at 21:08