CSS
CSS3
grid

Media Queryを使わずCSS grid Layoutをレスポンシブ対応

gridの使い方について書こうと思っていたんですが、気付いたらgridについての投稿がめちゃくちゃ増えたので今更書いてもな…
という感じになってしまったので、この記事ではgrid layoutMedia Queryを使わずにレスポンシブ対応させる使い方を抜粋して書きたいと思います。

レスポンシブ対応させるには以下のどちらかを使います。

css
repeat(auto-fit, )
repeat(auto-fill, )

動作に違いがあるので一つ一つ見ていきましょう。

html
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>
css(共通部分)
.container {
    display: grid;
    width: 100%;
    grid-auto-rows: 100px;
}
.item {
    background: lightblue;
    padding: 20px;
    font-size: 30px;
    color: white;
}
.item:nth-child(odd) {
    background: orange;
}

auto-fitの場合

auto-fitの場合
.container {
    ...省略
    grid-template-columns: repeat(auto-fit, 100px);
}

fit_nocenter.gif

コンテンツ幅に合わせてグリッドセルが移動しています。

auto-fillの場合

auto-fillの場合
.container {
    ...省略
    grid-template-columns: repeat(auto-fill, 100px);
}

fill_nocenter.gif

こちらも同じくコンテンツ幅に合わせてグリッドセルが移動しています。

auto-fillとauto-fitの違い

auto-fillはアイテムの配置されていない部分にも、アイテムの幅を確保しています。
どういうことかと言うと、例えば.container全体をセンタリングさせたい場合に動作に違いが生じます。

auto-fitの場合

auto-fitの場合
.container {
    ...省略
    grid-template-columns: repeat(auto-fit, 100px);
    justify-content: center;
}

fit_center.gif

始めからcontainer全体がセンタリングされています。

auto-fillの場合

auto-fillの場合
.container {
    ...省略
    grid-template-columns: repeat(auto-fill, 100px);
    justify-content: center;
}

fill_center.gif

auto-fillの場合、途中からセンタリングされているように見えます。
しかし、実際には表示されたときからセンタリング表示されています。

auto-fillはアイテムの配置されていない部分にも、アイテムの幅を確保している

下の画像のように、アイテムが配置されていない箇所にも、縦横100pxのアイテムが配置可能な限り配置されていると仮定した挙動をします。

3358db406a4f96e2ca3b62b73f0f5b09.png

auto-fitはこのスペースには何も配置しません。

こう見るとあえてauto-fillを使う場面はあるのか…?と疑問になりますが、きっと意図あるんでしょうね。

基本的な使い方について

この辺りの記事がとてもわかりやすいです。

CSS Grid Layout を極める!(基礎編)
CSS Grid Layoutをガッツリ使った所感