Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What is going on with this article?
@kikiriko200

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

More than 1 year has passed since last update.

はじめに

先日、グリッドで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使ったらいいんじゃないですかね(小並感)
16
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kikiriko200
一応JK。 受験生だけどPCやってるダメ人間。 GitHub/Twitter- kikiriko200

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
16
Help us understand the problem. What is going on with this article?