【CSS】gridの使い所とFlexの使い所

display:gridとdisplay:flexの2つは最近のWEBデザインを構成するために必要な要素になっています。
WEBデザインを行うときには、この2つの要素でどのようなことが出来るのか？どの様に使うのかを覚えておくことで、レスポンシブデザインへの対応やコーディングしやすいデザインの知識になります。

display:flexの使い所

display:flexを指定すれば、指定した要素内の物が横並びになります。
（縦並びもありますが、それはまた後日）

<ul class="flex">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
  <li>項目5</li>
  <li>項目6</li>
  <li>項目7</li>
</ul>

.flex {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
}
.flex li {
  border:1px solid #ccc;
  padding:10px;
}

flexは中の項目の横幅に合わせて横並びになっていきます。
今回は簡単な紹介だけですが、これを均等な位置に配置する事もできます。

justify-content:space-around を適用

flexは横３列に並べたい、など、並べる数が決まっている場合では基本的に使われないのですが、横に並べる数が毎回違うなどという場合、またはテキストのラベルを横並べにしたい時等、横幅がまちまちな物を並べる場合に効果を発揮します。

display:gridの使い所

display:gridは指定した要素内をマス目上に切り分けるように区切るための表示を行います。
昔懐かしいテーブルでデザインしていたあの頃のような感じです。あの頃に比べたら格段に性能は向上しています。

<ul class="grid">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
  <li>項目5</li>
  <li>項目6</li>
  <li>項目7</li>
</ul>

.grid {
  display: grid;
  list-style: none;
  grid-template-columns: repeat(3,1fr);
  margin:0;
  padding:0;
}
.grid li {
  border:1px solid #ccc;
  padding:10px;
}

上記ではgridを３列に指定しています。中の要素は均等に３列で並ぶようになります。

gridはページのレイアウトを構成するために用意されたCSSですので、このようにレイアウトを区切るように配置するように使うことで本領を発揮します。

<ul class="grid">
  <li class="header">ヘッダ</li>
  <li class="main">本文</li>
  <li class="side">サイドバー</li>
  <li class="footer">フッタ</li>
</ul>

.grid {
  display: grid;
  list-style: none;
  grid-template-columns: 1fr 250px;
  margin:0;
  padding:0;
}
.grid li {
  border:1px solid #ccc;
  padding:10px;
}
.grid .header,
.grid .footer {
  grid-column: span 2;
}
.grid .main {
  height:500px;
}

gridでこのような配置を行うことが出来るようになります。

使い分けることでWEBデザインも分かりやすくなります

flexとgridを使う場合、このように使いやすい部分に対して、それぞれを使い分けていくことが望ましいと思います。
ワイヤーフレームやデザインを考える時点でも、ある程度flexやgridの事を考えて作ると、出来上がったデザインがコーディングしやすくなっていきます。

このような感じで、日々色々な事が出来るようにがんばっております。
もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！