省エネエンジニア

ゆるっとエンジニアやってます。Android、Webのお仕事やってます。Iotのお仕事に関わりたい。

【CSS】グリッドレイアウトの存在に気づいてしまった

遅ればせながら、グリッドレイアウトの存在に気づいてしまいました。

今お仕事で作っているWebアプリの構成が下の図の通りなのですが。

f:id:qkuroneko:20171101081126p:plain

この、レイアウトだとメニューとコンテンツのところがちょっと面倒ですよね。

html

<div>
  <div class="menu"></div>
  <div class="contents"></div>
</div>

css

.menu {
  display: inline-block;
}
.contents {
  display: inline-block;
}

今まではこうやって凌いでました。 が、メニューのところの背景に色をつけたいとクライアント様から言われちゃいまして、 どうしたもんかと悩んでおりました。

<div>だとheight%が使えず中の要素の大きさになってしまうので、 いい感じに背景色がつけられなかったのです。

そこで、グリッドレイアウトです。

html

<div class="grid">
    <header></header>
    <div class="menu"></div>
    <div class="contents"></div>
    <footer></footer>
</div>

こいつをいい感じにレイアウトします。

まずは、外枠に

.grid {
  display: grid;
}

をつけます。 で、分割方法を指定します。

.grid {
  display: grid;
  grid-template-rows: 90px 1fr 40px;
  grid-template-columns: 200px 1fr;
}

縦方向に3分割、横方向に2分割しました。

あとはどこへ配置するかを指定します。

header {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column: 1 / -1;
  background-color: #cccccc;
}

.menu {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: #ff0000;
}

.content {
  grid-row: 2 / -2;
  grid-column: 2 / -1;
  background-color: #eeeeee;
}

footer {
  grid-column: 1 / -1;
  grid-row: 3 / -1;
  background-color: #666666;
}

こんな感じ。 分割したgridは左から1,2,3とナンバリングされていきます。 右からだと-1,-2,-3とナンバリングされるようです。 上下も同様。

入れたいエリアのナンバーを指定するとそこに配置されるようになります。

f:id:qkuroneko:20171031181213p:plain

ご覧の通り。 ちょっと要素入れてみました。

メニューとコンテンツの高さはどちらかの大きい方に合わせてくれるようなので、 これでメニューのところにいい感じに背景色をつけることができました。

めでたしめでたし。

参考: CSS Grid Layout を極める!(基礎編) - Qiita