グリッドレイアウトで基本的なレイアウトを作る

「フルブリード（full-bleed）」と呼ばれる画像を幅いっぱいに表示する方式(但し幅1300pxまで)を含めて、見出しを一番上に、記事は40文字で表示する構成が上に示す通りの完成形である。

記事が入るカラムの幅は固定で min() を使用して、大きなスクリーンのときは40ch（40文字）、小さなスクリーンでは利用可能なコンテナ幅の100% が使用される。さて、ここまでの CSS で次のレイアウトが出来上がる。

<main class="wrapper">
  <h1>Starting point　出発点</h1>
  <p>哲学が何であるかは、誰もすでに何等か知っている。もし全く知らないならば、ひとは哲学を求めることもしないであろう。或る意味においてすべての人間は哲学者である。言い換えると、哲学は現実の中から生れる。そしてそこが哲学の元来の出発点であり、哲学は現実から出立するのである。</p><img class="full-bleed" alt="cute meerkat" src="bg.jpg">
</main>

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(40ch, 100%)
    1fr;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

display: grid; はCSS Grid を使用する親要素に定義する記述だ。

grid-template-columns プロパティはグリッドの形状を定義するもので、３つの値を定義すると、３カラムが発生する。

３つの値はカラムの幅を定義するものだ。fr は利用可能なスペースを占める柔軟な単位である。ここまでの CSS だと以下のレイアウトが出来上がる。タイトルと記事が同一のカラムに配置されているのでモバイルではスクリーンサイズをはみ出してしまう。

そして、問題は次のCSS。

.wrapper > * {
  grid-column: 2; 
  /* grid-column: 2 / 3; */ 
  /* grid-column: 2 / span 1; */
}

この CSS を加えると、レイアウトが変わる。

3カラムのグリッドを定義したので、次に子を割り当てる。デフォルトでは、子は最初に利用可能なグリッドセルに配置される。しかし、このデフォルトを上書きし、2番目を中央カラムにし、1と3番目は空のままにする。このスタイルシートで、2番目が中央カラムになる。

このセレクタで、.wrapperのすべての子を2番目の中央のカラムに割り当てることができた。これで、見出しも記事もすべての子は中央カラムに配置された。

次に、これまでの CSS にmax-width: 1300px; を追加することで、非常に大きなスクリーンにおいて幅を最大1300pxまでに制限することが可能になる。デザインを整えて完成。

.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

さて、完全理解までいかない部分が残っている。次の内容だ。「.full-bleedはワイルドカードセレクタ（*）よりも詳細度が高いため、優先される。.full-bleedが勝つことが分かっているので、意図的に競合を設定している。ワイルドカードセレクタの利点は、常にこれらの戦闘に負けることである。したがって、デフォルト値を定義する時に便利だ。」

ここの真相を以下CSS を別の方法で再構築して検証する。書き換えるのは以下の部分だ。

.wrapper > * {
  grid-column: 2; 
}

wrapper > * で一括指定した部分をひとつひとつ書き出すと以下のようになる。例外は.full-bleedだ。ここで上のCSSの詳細度の優先の意味が分かる。

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(40ch, 100%)
    1fr;
  color: #888;
}
.wrapper h1 {
  grid-column: 2;
}
.wrapper p {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニックより引用