グリッドを
極める縦・横（行・列）同時に設定したり
魔法の様な異次元レイアウトが可能に
CSSのグリッドレイアウト

image: グリッドを極める
Top›labo›
Master CSS Grid

grid-template-areasを使う異次元レイアウト｜ CSS Grid Layout

 | 2022/12/26

これ まで

まずはCSSグリッドの説明から
  • コラムレイアウトにはいろいろな方法がある

    これまでCSSでのレイアウト方法には黎明期からいろいろありました。
    初期はテーブルで組んだり、フロートだったりしましたが、要素を簡単に天地のセンターにすることがどうしても困難でした。
    後にdisplay: tableが出てきたあたりからようやくようやく天地センターが可能になりましたが、やはり要素の並びに依存していました。
    フレックスボックスの登場でようやく自由なレイアウトが可能になりましたが、同時に縦横を指定することは困難で、縦と横は別々のプロパティで枝分かれしていました。
    また、レイアウトが左上から並ぶのは（入れ替えはできても）これまでと変わらず、ブラウザの横幅に応じて一段目の要素が二段目へ送られたり（それが良い面もありますが）、余白は子供の要素に指定するため各段の端のマージンを0にしないと行送りされてしまうなど（つまり横幅が何個になろうが右端のマージンは必ず0にするなどが困難）、自在なレイアウトとは言えません。

    CSSグリッドの登場

    CSSグリッドの登場によりようやく縦横任意に自在な指定が可能になりました。
    この方法で初めて縦と横を同時に指定することが可能になりました。
    MDNにも次のように明記してあります。

    ”グリッドは強力な仕様であり、フレックスボックスなど CSS の他の部品と組み合わせると、以前は CSS での構築が不可能であったレイアウトを作成することができます。”
    MDN | 開発者向けのウェブ技術/グリッドレイアウトの基本概念 より

    グリッドレイアウトは文字通り縦横（行と列）2次元で指定する

    まず親と子供が必要です。
    親にdisplay: grid;　これはこれまでと同じ。
    そして指定方法は大きく2種類あります。
    一つ目が縦横を明示的に指定する方法。
    grid-template-columnsで列、grid-template-rowsで行を指定します。

    たとえば、子供が9個の要素で、それらを縦横それぞれ3X3の配置にする場合
    ※縦：40px.横：60px
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 40px 40px 40px;
    と指定します。

    これで3ｘ3のコラム段組みが完成します。
    要素の余白はgrid-gap:で指定します。
    縦横を個別に指定する場合はrow-gapおよびcolumn-gapとなります。
    ただ、この方法は必要であろうとなかろうと9個の子要素は必ず記述する必要があります。
    感覚的にはテーブルの指定方法とそれほど変わらない感じもあります。

本命 解説

空要素を使わず、必要な要素だけで自在なレイアウト
  • grid-template-columns、grid-template-rowsもやっぱり面倒

    grid-template-columns、grid-template-rowsでも自在なレイアウトはできますが
    divなどの要素を何個も記述するのが面倒だと感じることもあります。
    たとえば、一番最初と真ん中と一番最後だけ欲しい場合など。
    この場合不要な6個の記述が非常に面倒です。

    ところがgrid-template-areasを使うと必要な要素を記述するだけで同じレイアウトが実現できます。

    grid-template-areas の指定方法

    親要素の中に子要素を3個記述します。それぞれIDを#num1,#num2,#num3とします。
    まず親要素へ下記を指定。
    grid-template-areas:
    "a b b"
    "c d e"
    "f f g";

    上記のa~gが実際の要素のインスタンスになり、それに対応する実際の子要素にインスタンスの名前を指定します。
    子要素の指定は、

    ・左上子要素：#num1
    grid-area: a;

    ・センター子要素：#num2
    grid-area: d;

    ・右下子要素：#num3
    grid-area: g;

    こうすることでインスタンスの配置と同じ場所に実際の要素が配置されます。
    どうです。まるでブードゥーの魔法、傀儡子、人形使いのようです。
    これを異次元レイアウトと呼ばずして何と呼ぶんでしょう。


    ●次はgrid-template-areasを使ったサンプル
    grid-template-areasのサンプル：https://labo.studio-happyvalley.com/grid/areas/
    下はHTMLのコード

    <body>
<main>
    <h1>grid-template-areas</h1>

    <div id="container">
        <div id="num1"><figure><img src="/assets/labo/grid/images/witch1.webp" alt="A"></figure></div>
        <div id="num2"><figure><img src="/assets/labo/grid/images/witch2.webp" alt="D"></figure></div>
        <div id="num3"><figure><img src="/assets/labo/grid/images/witch3.webp" alt="G"></figure></div>
    </div>
</main>
	<script src="/assets/labo/grid/dist/grid.js" type="module"></script>
</body>
    MDNによるgrid-template-areasの解説

    MDNのgrid-area解説：https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-areas

    MDNによるgrid-areaの解説（子供用）

    MDNのgrid-area解説：https://developer.mozilla.org/ja/docs/Web/CSS/grid-area

その 他

その他のグリッドレイアウトの便利な機能
  • グリッドレイアウトには他にも便利な仕様・機能が盛りだくさんです

    グリッドレイアウトには専用の便利なプロパティがたくさんあります。
    単位のfr、計算値minmax()、設定値repeat()など非常に便利です。

    frの説明

    グリッドレイアウト専用の可変の長さの単位です。
    サンプル
    .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
    }
    ただしテキストがコンテンツの場合は希望通りの長さにはなりません。

    MDNのfr解説：https://developer.mozilla.org/ja/docs/Web/CSS/flex_value

    minmax()の説明

    グリッドレイアウト専用の関数で寸法の範囲を min 以上、 max 以下で定義します。。
    ただし、すべてを固定値で設定すると不具合が起きるので(その場合左上の要素から順に優先されます）、frやautoなどと併用します。

    MDNのminmax()解説：https://developer.mozilla.org/ja/docs/Web/CSS/minmax

    repeat()の説明

    トラックリスト内での部分的な繰り返しを表し、列や行の繰り返しを省略して記述できます。
    grid-template-columns と grid-template-rows の中で使います。

    MDNのrepeat()解説：https://developer.mozilla.org/ja/docs/Web/CSS/repeat

    MDNによるCSS Gridの基本の解説です

    MDNのGridレイアウト解説：https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

『グリッドを極める』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition