【css】gridレイアウトとレスポンシブデザイン【gird編その２】

gridレイアウトの最大の特徴は、CSSの操作でレイアウトを操作できることにあります。htmlに手を入れずとも、css側が変化したらそれに合わせて見た目のレイアウトが変更していきます。
これは、ものすごくレスポンシブデザインと相性が良いと言うことになります。そこで、レスポンシブデザインを前提においたgridレイアウトを考えてみたいと思います。

横に並んでいるものを縦に並べ直す

レスポンシブデザインで一番多いパターンとしては、スマホでは縦に並んでいる物をPCでは横に並べたいと言う用途になると思います。
このような用途での利用は実に簡単です。cssのmediaを使ったレスポンシブのCSSだけでレイアウト変更を自在に行うことが可能になります。

<div class="box">
  <div class="box-in">1</div>
  <div class="box-in">2</div>
  <div class="box-in">3</div>
  <div class="box-in">4</div>
  <div class="box-in">5</div>
  <div class="box-in">6</div>
</div>

.box {
  display: grid;
  gap: 30px;
  padding: 30px;
}

@media screen and (min-width: 768px) {
  .box {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media screen and (min-width: 1024px) {
  .box {
    grid-template-columns: repeat(3, 1fr);
  }
}

.box .box-in {
  border: 1px solid #8cbce9;
  display: flex;
  height: 100px;
  justify-content: center;
  align-items: center;
}

ものすごく簡単なメディアクエリを行いました。
画面の横幅を広げる毎にgridデザインの横の列が増えていくのが確認できると思います。
この様に配置を横幅に合わせて変更させる場合、gridを利用する事で分かりやすく状態を変更させることが出来ます。

メディアクエリに頼らずにレスポンシブを行う

これはメディアクエリを使った一例として作りましたが、gridはgrid自体にメディアクエリ相当の関数が存在します。
それが「minmax()」です。これは要素の最小と最大を設定する関数になります。これを上手に利用することで、メディアクエリを行わずに、gridレイアウトの都合で配列を変更することが出来るようになります。

.box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  padding: 30px;
}

.box .box-in {
  border: 1px solid #8cbce9;
  display: flex;
  height: 100px;
  justify-content: center;
  align-items: center;
}

ちょっといきなり面倒くさい書き方をする感じになってしまいましたが、
「grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));」の部分がこのgridレイアウトの全てになります。
repeat()で行の要素をすべて「auto-fit」で「minmax(300px, 1fr)」の範囲で並べるようにしています。
auto-fitとauto-fillは横一列に満たない時の隙間が空いた時の処理で、auto-fillを使用すると、隙間が空いた時に隙間が空いたままにします。
逆にauto-fitは隙間が埋まるように自動的にサイズを調整するようになります。

minmax()は名前の通り、最小のサイズと最大のサイズを設定します。
この場合は最小のサイズが300pxで最大のサイズは1frになります。
300pxのボックスを置くことができなくなった場合、列の数が減ります。1frを指定しているので、中途半端なサイズの場合は拡大されて、画面の左右にはピッタリとくっつくようになります。

この方法はレスポンシブデザインと相性が良いです。ブレイクポイントなどとは関係なく、そのコンテンツが表示される媒体に合わせて変更されるようになることで、いろいろな媒体で適切な表示ができるようになります。

まとめ

駆け足でgridレイアウトの学習をしていきましたが、この部分に関しては、自分でレイアウトを作って、色々なレイアウトを作ってみるのが一番の近道になると思います。
こんな感じで、色々なタグやCSSを学習することは、デザインの精度を上げる上でそれなりに必要なことになります。デザイナーがコーディングを学ぶ必要がある理由なども含め、これから本格的にNOTEで綴っていきたいと思います。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！