CSSでハニカム構造的な配置を実現する

はい。CSSでハニカム構造的な配置を実現し、要素の大きさが変わったときもいい感じに調整してみました。

言語化してもわかりにくいですね。
そもそもハニカム構造とはなにものなのか？まずはそこから説明しましょう。

---

ハニカム構造とは

ハニカム構造（ハニカムこうぞう、英語：honeycomb structure）とは、正六角形または正六角柱を隙間なく並べた構造である。ハニカムとは英語で「ミツバチの櫛（＝蜂の巣）」という意味であり、多くの蜂の巣がこのような形をしていることから名付けられた。
広義には、正六角柱に限らず立体図形を隙間なく並べたもの（3次元空間充填）をハニカムと呼ぶ。
板状の素材に孔を開ければ、強度をあまり損なわずに必要な材料を減らすことができる。孔の大きさや数をどんどん増やせば、最終的には棒材による構造が残る。同様に、塊状の素材に孔を開ければ、板材による構造が残る。これらがハニカムである。

ハニカム構造 - Wikipedia より引用

---

いかがでしょう。Wikipediaをコピペ引用しただけですが。
わかったようなわからないようなかもしれません。

結局のところDEMOをみていただくのが一番早いとおもいます。

DEMO

See the Pen HONEYCOMB STRUCTURE by kimmy (@kimmy) on CodePen.

こんな感じです。ボールをクリックすると若干大きくなりますが、なんとなくハニカムを維持しています（厳密には正六角形を維持できてません）。

---

動作原理

ポイントは、

1. サイズの異なる要素を縦位置でセンタリング
2. 複数の要素を横位置でセンタリング
3. 高さの決まっている要素を縦位置でセンタリング

の3点を同時に行っていることです。
3番のみ、JSで制御していますが、1と2はinline-block要素をつかって実現しました。

SCSS

* {
  user-select: none;
}

body {
  background: #00695C;
}

.wrapper {
  text-align: center;
}

.stage {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}

.line {
  width: 100%;
  text-align: center; // 中のinline要素をセンタリング
}

.ball {
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
  width: 80px; height: 80px;
  background: #FFAB00;
  vertical-align: middle; // 己の縦位置センタリング
  transition: all .15s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  cursor: pointer;
    
  &.on {
    margin: 10px;
    width: 120px; height: 120px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  }
}

こんなかんじですね。
どこかで誰かの役に立てば幸いです。