CSS GRIDを勉強してみる(12) - アスキーアートっぽい指定

ガイドは新しいページに入った。

developer.mozilla.org

グリッド線に沿って配置するのが王道なんだけども、そうではないやり方もある。 アスキーアートっぽいやり方が。 いや、ガイドにそう書いてあんだもんよ("we sometimes call this the ascii-art method of grid layout")。

さて、今回はこんな2ペインアプリっぽい構成を作る。 まずは、前回までの通り、グリッド線を使って構成してみよう

HTML

<div class="wrapper">
  <div class="header">Header</div>
  <div class="footer">Footer</div>
  <div class="content">Content</div>
  <div class="sidebar">
    <div style="height: 100px">Sidebar</div>
  </div>
</div>

CSS。わかりやすいと思う。

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 2px;
}

.header {
  grid-row: 1;
  grid-column: 1 / -1;
}

.footer {
  grid-row: 3;
  grid-column: 1 / -1;
}

.content {
  grid-row: 2;
  grid-column: 4 / -1;
}

.sidebar {
  grid-row: 2;
  grid-column: 1 / 4;
}

レンダリング結果はこうなる。

アプリっぽく見えるように、 真ん中の高さを稼ぐためにSidebarのところに高さ100pxダミーコンテンツをいれてみた。

さて、これをgrid-template-areasを使って表現してみよう。

各アイテムにgrid-areaで名前を付ける。

.header {
  grid-area: h;
}

.footer {
  grid-area: f;
}

.content {
  grid-area: c;
}

.sidebar {
  grid-area: s;
}

そして、それらの配置をアスキーアートっぽく書く。こんな感じ。 "でクォートしなきゃいけないのがイケてないな。

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 2px;
  grid-template-areas: 
    "h h h h h h h h h"
    "s s s c c c c c c"
    "f f f f f f f f f";
}

空白のセルを指定する場合には.で埋める。こんな感じ

wrapper {
  grid-template-areas: 
     "h h h h h h h h ."
     "s s . c c c c c c"
     ". . f f f f f f f"
}

メディアクエリとの組み合わせ

Bootstrapが流行ったのは、お手軽にレスポンシブルなデザインを 組み込むことができることが一因だったと思うけど、 正統派なやり方は、メディアクエリを使う方法かと思う。

というわけで、このgrid-template-areaをメディアクエリと組み合わせた例はこんな感じ。

wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
  grid-template-areas: 
    "h" 
    "c"
    "s"
    "f";
}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas: 
      "h h h h h h h h h"
      "s s s c c c c c c"
      "f f f f f f f f f";
  }
}

ウィンドウを狭めていくと、表示が変わる。