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

はじめに

先日、グリッドで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%;
}

これがこうなる

Grid

grid-sample

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

これがこうなる

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:https://caniuse.com/#feat=flexbox
• grid:https://caniuse.com/#feat=css-grid

これを見ると、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使ったらいいんじゃないですかね(小並感)