search
LoginSignup
17
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

グリッドレイアウト、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%;
}

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
17
Help us understand the problem. What are the problem?