How do I create a honeycomb div grid rather than the standard grid?

Question

Here is a rough normal grid structure: http://jsfiddle.net/CFxzH/1/

I am trying to create what I call a honeycomb grid rather than the standard div grid. Here is a rough illustration.

NORMAL GRID

[] [] [] [] []
[] [] [] [] []
[] [] [] [] []
[] [] [] [] []
[] [] [] [] []

HONEYCOMB GRID

[] [] [] [] []
  [] [] [] []
[] [] [] [] []
  [] [] [] []
[] [] [] [] []

What I also want to achieve is dynamic 100% width of the parent box, expanding with the width of the window.

When you use alternately an even amount of elements and an odd amount of elements per row you should get an honeycomb. Of course it won't always fill the last row. — YMMD, Apr 10 '12 at 00:23
Maybe this will help you: https://stackoverflow.com/questions/70294413/coordinates-of-the-edges-of-a-honeycomb-grid-in-python?noredirect=1#comment124262783_70294413 — metz_lisa, Dec 10 '21 at 08:56

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

You can set the x axis to a value half the y axis and then add a diameter to the bucket. This also works with a hexagon. Here is a question about a fast grid search: Optimizing search through large list of lat/long coords to find match.

edited May 23 '17 at 12:24

Community

1
1

answered Sep 13 '13 at 20:14

Micromega

12,486
7
35
72

score 0 · Accepted Answer · answered Apr 07 '16 at 23:53

Recycling @bfavretto's answer here.

http://jsfiddle.net/CFxzH/2/

Something like this get's the job done.

var boxes_per_even_line = Math.floor($('#boxes').width() / 110);
var boxes_per_odd_line = boxes_per_even_line-1;
var boxes_every_two_lines = boxes_per_even_line + boxes_per_odd_line;
console.log(boxes_per_even_line, boxes_per_odd_line, boxes_every_two_lines)
var boxes = $('.box');
var total = boxes.length;

for(var i=boxes_per_even_line; i<total; i+=boxes_every_two_lines) {
    $(boxes[i]).css('margin-left', 65);
    $(boxes[i+boxes_per_odd_line-1]).css('margin-right', 65);
}

How do I create a honeycomb div grid rather than the standard grid?

2 Answers2