【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;
}

縦方向に３分割、横方向に２分割しました。

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

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