CSSのFlexboxでグリッドレイアウトを実現した！

Flexboxでグリッドレイアウト

カスタムプロパティの--all-marginと--num-columnの値を変えると、それぞれのボックスのmarginと、横に並べるボックスの数を調整できます。

See the Pen VgYXzx by Ordermade Japan Inc. (@omj) on CodePen.

ボックスの幅の指定方法

一個のボックスに注目してみていきましょう。

.grid2x3 > div {
  display: flex;
  justify-content: center;
  align-items: center;

  width: calc(100% / var(--num-column) - 2 * var(--all-margin));
  margin: var(--all-margin); 
}

ここでのポイントは、1つのボックスのwidthを設定する時に、100%を横に並べるボックスの数で割ることで横方向の均等を実現しています。

さらに、ボックスの両端のmarginを引くことで厳密なwidthを計算しています。

ボックスをまとめるdiv

次に、ボックスをひとまとめにしているdivのスタイルをみてみます。

.grid2x3 {
  color: white;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: var(--all-margin);
}

flex-wrapプロパティをwrapにすることで折り返しできるようにします。また、heigthを100%にするのを忘れないように。

最後に両端のmarginを揃えます。これがないと、それぞれのボックスは均等配置だけれど、その全体の両端だけmarginが半分になってしまいます。

その問題を解消するため、ボックスに適用されているmarginと同じ値を外側のdivに適用させます。

あとはhtmlとbodyにheight: 100%を適用すれば完成です。

html, body {
  height: 100%;
  margin: 0;
}

参考

まとめ

Flexboxとても便利です。floatを使っていた頃の自分が嘘みたいです。CSSを考えて設計するのもとても楽しいですね。