Making a Grid of Hexagons like in builtbybuffalo.com

Question

First of all, I apologise if this is not the right place to ask this question. I just don't know any other source for Q/A.

I have a college project in which I have to submit an exact replica of this Site for passing my web dev practical.

I have managed to copy everything and only thing that is remaining is thehexagonal grid.

If someone can visit the site they can see that the number of hexagons per row changes according to width of browser window.

Here is my Code for the grid
CSS and HTML

.container {
  margin-top: 120px;
}
.hex-3-row {
  display: table;
  margin: 30px auto;
}
.hex {
  display: inline-block;
  width: 190px;
  height: 110px;
  color: white;
  background-color: red;
  position: relative;
  margin-left: 15px;
  z-index: 110;
  text-align: center;
  line-height: 110px;
}
.hex::after {
  content: "";
  background-color: red;
  height: 110px;
  width: 190px;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: rotate(60deg);
  z-index: -1;
}
.hex::before {
  content: "";
  background-color: red;
  height: 110px;
  width: 190px;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: rotate(-60deg);
  z-index: -1;
}
img {
  position: relative;
  height: 150px;
  width: 150px;
  top: 50%;
  transform: translateY(-50%);
}

<html>

<head>
  <title>hexagon</title>
  <link rel="stylesheet" href="css.css">
</head>

<body>

  <div class="container">
    <div class="hex-3-row">
      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>
    </div>

    <div class="hex-3-row">
      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>


      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

    </div>

    <div class="hex-3-row">
      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>
    </div>
  </div>





</body>

</html>

Now the grid I managed is looking a bit like theirs in full width. But how can I make it responsive ? and change number of Hexagons per row according to width ? I've tried to read their source code too but couldn't figure out the trick except that they're using <br> to do the trick but I just cant manage.

Would be really grateful if someone can point me in the right direction and also share any source for learning advanced CSS like this. Thanks a lot everyone for your time.

I've already tried the solution from this thread but what I'm looking for is a solution to do it just like builtbybuffalo.com guys, using <div> <br> and stuffs, not <ul><li>.

I'm not sure, but maybe they used a plugin for building this hexagon grid layout. Here is demo with similar layout, maybe it could help you: http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons — Teuta Koraqi, Dec 25 '16 at 20:19
you may take a look at http://codepen.io/gc-nomade/pen/eyntg , it was once a demo for a similar question here on stackoverflow. — G-Cyrillus, Dec 25 '16 at 20:19
@TeutaKoraqi no they're not using plugin, i copied JUST the CSS and HTML of that Hexagon grid and it worked without any jQuery/Javascript :) — Mahaveer, Dec 26 '16 at 04:53
I actually want to learn, not copy paste someone else's code as ill have to explain it all in my practical as well. :) — Mahaveer, Dec 26 '16 at 04:54
why do not you simply use media queries and assign different widths to the hexagons according to screen size? — Yahya Hussein, Dec 26 '16 at 05:05
@YahyaHHussein changing the size of hexagons is not a problem. I want to modify `number of hexagons per row according to width` without using jQuery/Javascript/plugin :) — Mahaveer, Dec 26 '16 at 07:57
if you change the width of hexagons then their count in one row will change, for example if you want three hexagons then the hexagon width should be 33% and if you want to have 4 hexagons then the hexagon should be 25%, I usually use such way to do what you want to do — Yahya Hussein, Dec 26 '16 at 08:01

Ouroborus · Accepted Answer · 2016-12-26T05:20:12.197

1

This is essentially your standard columned layout with a modified row breaking element. (They're using br for this, but it could be any element with the right styling.) There are a few breakpoints and the styles of the classes on the cells and the breaking elements are changed depending on which breakpoint is used. Note that the breaking elements are at the spots where the rows need to break and the classes set on them control which breakpoint uses that breaking element.

They aren't grouping them into rows as you are; there's essentially a single row of elements with carefully placed breaking elements that are shown/hidden depending on which breakpoint is active.

edited Dec 26 '16 at 05:20

answered Dec 26 '16 at 05:13

Ouroborus

16,237
4
39
62

Yes, I saw that they're using a single row of elements. I tried that too but the problem I faced was that **in that single row I couldn't give margin i.e place the elements correctly as they are inline elements** . If not too much trouble mind giving a sample code please ? :) – Mahaveer Dec 26 '16 at 07:53
1

In the Buffalo page, they use `text-align: center` on `body` to get the hexagon alignment. They also have a transparent filler element for the end of final row that's hidden when necessary in the same way the break elements are. I've built a simplified example [here](https://jsfiddle.net/wzkbrhhL/) using the same techniques. There's only one breakpoint at 662px. Most of the stuff related to that is towards the bottom of the CSS. The technique they use isn't generic, instead being tuned to the content of the page. – Ouroborus Dec 26 '16 at 23:02
yup, I tried that. I never knew `text-align:center` could be used to align something other than `text`. :) – Mahaveer Dec 27 '16 at 02:02

score 1 · Answer 2 · answered Dec 26 '16 at 07:06

1

You can write media queries to make it responsive.You can specify different styles for different screen sizes so that the UI modifies according to the screen size.For example,

@media screen and (max-width: 768px) {
.container{
width:500px;
}
}

answered Dec 26 '16 at 07:06

balaji thirumal

111
6

yes, I already tried that but with just changing the size of container I can't get the required behaviour. – Mahaveer Dec 26 '16 at 07:55

Making a Grid of Hexagons like in builtbybuffalo.com

2 Answers2