Encontrei um código que monta um conjunto de hexágonos (tipo uma colméia) de forma que seja responsivo. Fiz umas adaptações para atender ao que pretendo como resultado, que não é exatamente um grid. Simplesmente acrescentei uma classe para esconder o hexágono que eu não quero e ter uma espécie de diagrama.
Enfim, o problema que estou tendo é que o espaço entre cada hexágono está variando de acordo com a área de exibição. Por exemplo, se eu pegar o navegador e for mudando o tamanho da janela, quanto maior, menos espaço entre os elementos, chegando até sobrepor um ao outro.
Já tentei encontrar outras alternativas mas a maioria é com o hexágono com a base triangular.
Aqui está o que tenho:
* { 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>