4
I found a code that assembles a set of hexagons (like a beehive) in a way that is responsive. I’ve made some adaptations to suit my purpose as a result, which is not exactly a grid. I simply added a class to hide the hexagon that I don’t want and have a kind of diagram.
Anyway, the problem I’m having is that the space between each hexagon is varying according to the display area. For example, if I take the browser and change the size of the window, the larger, the less space between the elements, getting to overlap each other.
I’ve tried to find other alternatives but most are with the hexagon with the triangular base.
Here’s what I got:
* { box-sizing: border-box; margin: 0; padding: 0; }
.row { margin: -18.8% 0; text-align: center; }
.row:first-child { margin-top: 0%; }
.hexagon.hide { visibility: hidden; }
.hexagon {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0 8.2%;
padding: 16%;
transform: rotate(30deg) skewY(30deg) scaleX(.866);
}
.hexagon:before, .content:after {
content: '';
display: block;
position: absolute;
top: 7.8%; right: 0; bottom: 7.8%; left: 0;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
background-color: rgb(30, 144, 255);
}
.content:after {
content: attr(data-content);
top: 50%;
margin: -1.2em 0;
width: 100%;
height: 2.4em;
font: 1em/2.4 Century Gothic;
}<div>
<div class="row">
<div class="hexagon hide"></div>
<div class="hexagon content" data-content="foo"></div>
</div>
<div class="row">
<div class="hexagon hide"></div>
</div>
<div class="row">
<div class="hexagon content" data-content="foo"></div>
<div class="hexagon content" data-content="foo"></div>
</div>
<div class="row">
<div class="hexagon content" data-content="foo"></div>
</div>
<div class="row">
<div class="hexagon hide"></div>
<div class="hexagon hide"></div>
</div>
<div class="row">
<div class="hexagon content" data-content="foo"></div>
</div>
</div>
I think the spacing varies with the size of the window because several measures in the style are in percentage. Switching to absolute values may help.
– Oralista de Sistemas
Perhaps a fiddle (https://jsfiddle.net/) will help those who come to read the question. The OS executes its code but renders to a component that does not change size as the window resizes.
– Oralista de Sistemas
Hi @Renan, thank you for the answer. Running here on OS and going on button "whole page" it is possible to reproduce what I am reporting. Now, whether it’s in percentage or not, I honestly don’t know because I don’t have as much knowledge in CSS, I imagined that the percentage in this case would serve to have the responsive effect.
– Paulo Rodrigues
In fact, percentages serve to maintain responsiveness. I just saw the whole screen (I didn’t realize it was possible, my mistake) and was surprised by the fact that the spacing decreases as the hexagon map increases.
– Oralista de Sistemas
I found a variation of the code you use, which works without major problems. Note the response marked as accepted at: http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons
– Oralista de Sistemas
Would be something thus ?
– Edilson
Yes, it’s similar to the one you mentioned, but I even commented on my question, I need the hexagon with the straight base and this one (like several others I found around) has the triangular base. I’ve tried to take this and reverse but without success.
– Paulo Rodrigues