グリッドレイアウト、flexを使うか、gridを使うか

NO IMAGE

はじめに

先日、グリッドで12分割する意味ェ…ってなって1行を8分割する8-Gridというflexベースの軽量(v0.4.1のall.min.cssはgzip後333B)CSSを書いたが、gridはあまり理解していないので勉強も兼ねて書いてみた。

flexとgridの違い

そもそもの書き方

flex

flex-sample
.grid{
  display: flex;
}
.column1{
  width: 50%;
}
.column2{
  width: 50%;
}

これがこうなる
flex-sample.png

Grid

grid-sample
.grid{
  display: grid;
  grid-template-columns: repeat(2 1fr);
}
.column1{
  grid-column: 1;
}
.column2{
  grid-column: 2;
}

これがこうなる
gridsample.png

codepenは見やすいように高さと背景色いじったけど要するに同じ。

グリッドシステムの構築を考える

ブラウザの互換性で比べてみる

比較条件

部分的なサポートは対応していないものと見なし、プレフィックスが必要な場合は()内に記入。

要素名 互換性()内はprefixなし Chrome Firefox Edge Safari
flex 95.71(94.82)% 29(21)~ 28~ 12~ 9(7)~
grid 87.25(84.16)% 57~ 52~ 16~ 10.1~

ソース

これを見ると、flex>gridの互換性になっています。

その差はプレフィックス無しでは約10%にもなる。

書きやすさで比べてみる

比較条件

以下のようなグリッドシステムをCSSで作ってみる

  • 1行は12等分出来る
  • クラス名は.r(行),.col-(カラム)とする
  • スマホを考慮する(ブレークポイントは768px)
  • スマホ用のクラスは作らない(PC用のカラムを幅100%にするだけ)
  • 比較はminify後のバイト数で行う

ソース

flex
/*flex*/
.r{
    display: flex;
}
.col-1{
    width: 8.33%;
}
.col-2{
    width: 16.66%;
}
.col-3{
    width: 25%;
}
.col-4{
    width: 33.33%;
}
.col-5{
    width: 41.66%;
}
.col-6{
    width: 50%;
}
.col-7{
    width: 58.33%;
}
.col-8{
    width: 66.66%;
}
.col-9{
    width: 75%;
}
.col-10{
    width: 83.33%;
}
.col-11{
    width: 91.66%;
}
.col-12{
    width: 100%;
}
@media screen and (max-width: 768px){
    [class*="col-"]{
        width: 100%;
    }
}
grid
/*grid*/
.r{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.col-1{
    grid-column: span 1;
}
.col-2{
    grid-column: span 2;
}
.col-3{
    grid-column: span 3;
}
.col-4{
    grid-column: span 4;
}
.col-5{
    grid-column: span 5;
}
.col-6{
    grid-column: span 6;
}
.col-7{
    grid-column: span 7;
}
.col-8{
    grid-column: span 8;
}
.col-9{
    grid-column: span 9;
}
.col-10{
    grid-column: span 10;
}
.col-11{
    grid-column: span 11;
}
.col-12{
    grid-column: span 12;
}
@media screen and (max-width: 768px){
    [class*="col-"]{
        grid-column: span 12;
    }
}

minify後サイズ

  • flex: 309B
  • grid: 442B

結果

  • 横に分けるだけなら同じもの書いてもflexの方がgridよりも小さく書ける
  • 今回は使わなかったけど高さも絡むならgridの方が使いやすい(flexより自由度が高い)
  • 可読性はgridの方がいい気がする(spanの数字で大体わかる)
  • 結局一緒なら横に分けるだけならflex、縦も意識するならgrid使ったらいいんじゃないですかね(小並感)