クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > CSS > CSS Gridで12分割グリッドシステムが簡単に作れた（grid-template-areas推し！！）

CSS Gridで12分割グリッドシステムが簡単に作れた（grid-template-areas推し！！）

CSS デザイン

HTML要素を横に並べる方法はいくつかあるが、その中の一つ「CSS Grid」。これまでちゃんと触ったことがなかったのでトライしてみた。CSS Gridとグリッドシステムは相性がいいのではないか？と思い実際に作ってみた。なお、自分はgrid-template-areas推しです！！

【目次】

HTML横並びとCSS Grid

HTML要素を横に並べる方法は以下のものがある。

方法 備考
table 本来は作表のためのタグだが古（いにしえ）の時代はこれしか横に並べる方法がなく「テーブルレイアウト」と言って多様された。また、タグの中に属性で直接、線や色の指定を書いていた。
float 本来は図や画像などを浮かせて（float）段落の上に重ねて文字を回り込ませるためのCSSスタイル。テーブルレイアウトのあとにHTMLをCSSを分離しようという流れで大活躍した。しかしボックス内のすべての要素をfloatにすると全てが浮いてボックスが高さを失うため、末尾に擬似要素でclearfix（clear: both）を加える必要があった。
Flexible Box display: flex。CSS3から追加された。最初から横並びの目的で作られたため様々な設定ができ、フレキシブル（flex）に要素を並べることができる。
CSS Grid display: grid。これもCSS3で追加。横に並べるだけでなく、様々なレイアウト構成を実現する設定が揃っている！Flexible Boxより少し複雑？

最初から横に並べる用途で作られたのはFlexible Boxであり、これによってtableタグは作表、floatは文字回り込みという本来の役割に帰っていった。（これまで感謝！）

Flexible Boxは基本は横並び用の設定なので法則性があまりないページ構成はいささか作りづらい。そこで作られたのがCSS Gridでもっと自由にレイアウトを組むことができる！

IEがベンダープレフィックスが必要なのようだけどもうほとんど全てのブラウザに対応している！（もういいよね？IEは。。）

※参考：Can I use... Support tables for HTML5, CSS3, etc

時が来た！それだけだ。

CSS Grid：grid-row、grid-column編

以前、「画面分割」の記事で紹介したグリッドシステム。

※参考：【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた - クモのようにコツコツと

f:id:idr_zz:20190607221608j:plain

文字通り「グリッド」だし、CSS Gridと相性がいいのではないか、と思いさっそく作ってみた。

See the Pen CSS Grid -01+ by イイダリョウ (@i_ryo) on CodePen.

まずは6:6（シンメトリー）のカラム。左右が同じ幅。HTMLはこちら。

<div class="container">
  <header>BUNKATSU</header>
  <figure><figcaption>6:6カラム（=シンメトリー））</figcaption></figure>
  <section>
    <h2>6:6カラム（=シンメトリー）</h2>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああ。<p>
  </section>
  <footer>@ クモのようにコツコツと</footer>
</div>
  • 全体を囲うdivのclass名は.container
  • 中身は上からheader、figure、section、footer

headerとfooterは上下にあってfigure（画像）とsection（テキスト）は左右2カラムに並べたい。

以下CSS。CSS Gridに関係がある部分だけ抜粋。

まずは外側の.container。

.container {
  display: grid;
  grid-template-rows: 
    80px 1fr 40px;
  grid-template-columns: 
    6fr 6fr;
}
  • diaplayをgridに
  • grid-template-rows: でセルの行の高さを設定。上から80px、1fr、40px
  • grid-template-columnsでセルの列の幅を設定。左から6fr、6fr

CSS Gridでは格子状に引かれた線の中の一マスを「セル」という。エクセルみたい。rowが行、columnが列。行はロウ？列はカラムなのでわかる。まあ、カラムじゃない方、と覚えようw なお、テンプレートではrows、columnsと複数形になっている。

frはとてもフレキシブルに比率を設定できる(%のように合計が100にならなくてもいい）。フレキシブルのfrかな？1だとauto的な「成り行き」になる。6fr 6frは実質1fr 1fr（1:1）でも見た目は変わらないのだが、12分割グリッドがわかりやすくするために6にした。

次に、各要素の位置と範囲を設定していく。

header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

figure {
  grid-row:  2 / 3;
  grid-column: 1 / 2;
}

section {
  grid-row:  2 / 3;
  grid-column: 2 / 3;
}

footer {
  grid-row:  3 / 4;
  grid-column: 1 / 3;
}
  • grid-rowは行の開始ライン / 終了ライン
  • grid-columnは列の開始ライン / 終了ライン

グリッドでは単数形のrowとcolumn。値の数値は「開始ライン / 終了ライン」 たとえばheaderの場合、行は1本目〜2本目のライン、列は1本目〜3本目のラインが該当する位置、範囲になる。

正直、自分はこのラインの数を書く方法がとてもわかりづらかった。ライン数の最大値は行数、列数のプラス1になる。3行だったら4本とか。ついつい何番目のマスという考え方になってしまったり、複数の要素が同じ位置に重複してしまったり、とても混乱した。。

なお、CSS Gridの基本はこちらの記事がとてもわかりやすく、参考になった！

※参考：CSS Grid Layout を極める！（基礎編） - Qiita

CSS Grid：grid-template-areas編（コレ好き！！）

ライン（grid-row、grid-column）で指定する方法はいまいち直感的ではなかった。先ほどの参考記事では後半にgrid-template-areasという「エリア」で指定する方法もあった。やってみたら、こちらの方がとても直感的だった！

6:6カラム（=シンメトリー））

先ほど6:6カラム（シンメトリー）をgrid-template-areasで作るとこうなる。

See the Pen CSS Grid -01 by イイダリョウ (@i_ryo) on CodePen.

見た目はまったく変わらない。.containerのCSSはこちら。

.container {
  display: grid;
  grid-template-rows: 
    80px 1fr 40px;
  grid-template-columns: 
    6fr 6fr;
  grid-template-areas:
    "header header"
    "figure section"
    "footer footer"
    ;
}
  • display: grid、 grid-template-rows、grid-template-columnsは変更なし
  • grid-template-areasを追加。1行ごとにセルに適用されるエリア名を指定

このgrid-template-areasがアスキーアート（AA）のようでとても直感的だった！ダブルコーテーション" "を1行として、その中で1セルごとに半角スペースを空けてエリア名を入れていく。

エリア名は各要素の中に設定する。

header {
  grid-area: header;  
}

figure {
  grid-area: figure;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}
  • grid-areaプロパティの値がエリア名になる。エリア名が当てられたエリアに要素が配置される。

エリア名は各要素に書くが、エリア自体は.containerの一箇所で一括管理されている。直感的じゃなかったライン数に比べて、エリアは一眼でわかる！エリアの重複も起こらない。自分は断然、こちらの方が作りやすかった！！

基本設定ができたので、12分割グリッドの他のサイズを作っていく。

7:5カラム（≒白銀分割（1:1.414））

まず7：5カラム。ほほほぼ白銀分割（1:1.414）と同じになる。

See the Pen CSS Grid -02 by イイダリョウ (@i_ryo) on CodePen. 

.container {
   grid-template-columns: 
   7fr 5fr;
}

grid-template-columnsだけ打ち替えている。左から7fr、5frで7:5になる。

おまけ：黄金分割（1.618:1）

前回、12分割グリッドシステムでは再現ができなかった黄金分割（1.618:1）もfrを使うと簡単に作れる。

See the Pen CSS Grid -02+ by イイダリョウ (@i_ryo) on CodePen. 

.container {
   grid-template-columns: 
   1.618fr 1fr;
}

1.618と1の合計は2.618だがfrは合計値がいくつだろうと比率を割り出してくれるのでとても設定しやすい。

8:4カラム（=3分割）

どんどんいく。次は8:4カラム。3分割2:1と同じ比率になる。

See the Pen CSS Grid -03 by イイダリョウ (@i_ryo) on CodePen. 

.container {
   grid-template-columns: 
   8fr 4fr;
}

9:3カラム（=4分割）

9:3カラムは4分割の3:1と同じ比率。

See the Pen CSS Grid -04 by イイダリョウ (@i_ryo) on CodePen. 

.container {
   grid-template-columns: 
   9fr 3fr;
}

10:2カラム（=5分割）

最後、10:2カラム。5分割の4:1と同じ比率。

See the Pen CSS Grid -05 by イイダリョウ (@i_ryo) on CodePen. 

.container { 
  grid-template-columns: 
   10fr 2fr;
}

今回使った写真（2020/05/23追加）

今回使っているのはこの写真。 f:id:idr_zz:20200523124026j:plain

インスタにアップした写真です！

この投稿をInstagramで見る

味のある階段 #階段 #Stairs

イイダリョウ(@idr_zz)がシェアした投稿 -

最後に

f:id:idr_zz:20190608161053j:plain

CSS Gridとグリッドシステムは思った通り親和性は高かった！自分としてはなんといってもgrid-template-areasでエリアで設定するのが直感的でとても気に入ってしまった。ネット上ではライン数で指定するgrid-row、grid-columnの方がたいてい先に説明されており、こちらの方が基本というか標準的な方法なのだろうか。そのせいで自分は取っ付きにくさを感じてしまったのだが。。そのうちライン数で指定する方が望ましい局面もあるのかもしれないので、一応やり方だけは理解しておいた。ということでgrid-template-areas推しの記事でした。それではまた！

※参考：「デザインの基本」記事まとめ
qiita.com

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com