グリッドレイアウトを作りたいのですが、やり方を調べてみても概念がよくわかりません

Question

HTML・CSSについての質問です。
以下のようなグリッドレイアウトを作りたいのですが、やり方を調べてみても概念がよくわかりませんでした。
見たサイトはこちらです。
もっとわかりやすいサイトや考え方があれば教えていただきたいです。
直接正答を投稿してもらっても構いません。

Comments

[m.ts10806]

ご自身の理解したところまでで良いので記載願います。本当に何も分からなかったのであれば、アドバイスの内容も理解できない可能性もあります。

[m.ts10806]

それに「自力で作ろうとしなくても対応したCSSフレームワークを使えば良い」と言われる可能性もあります(現に私はそう感じました)

Answer 1

こんにちは。

とりあえず、このHTMLで説明しますね。

<div class="container">
    <div class="a">1/2</div>
    <div class="b">1/4</div>
    <div class="c">1/4</div>
    <div class="c">1/4</div>
</div>

---

まず、コンテナに display:grid を当てて、幅と高さを設定します。

    .container{
        display: grid;
        width: 100%;
        height: 100vh;
    }

---

次に、幅を1/4に分割します。

    .container{
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-columns: 25% 25% 25% 25%;
    }

---

高さも1/2に分割します。

    .container{
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 50% 50%;
    }

これで、全体が8マスに分割されました。

---

次に、各アイテムを配置していきます。

aの要素は、横に2マス分を使っていますから、span で2マス分確保します。

    .container{
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 50% 50%;
    }
    .a{
        grid-column: span 2;
    }

---

さらに、縦にも2マス分を使っていますから、同様に確保します。

    .container{
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 50% 50%;
    }
    .a{
        grid-column: span 2;
        grid-row: span 2;
    }

---

bの要素は、横は1マス分ですが、縦に2マス分使っていますので、同様にします。

    .container{
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 50% 50%;
    }
    .a{
        grid-column: span 2;
        grid-row: span 2;
    }
    .b{
        grid-row: span 2;
    }

---

cの要素は、縦横とも1マス分なので、指定は不要です。

以上です。つまりは、テーブルレイアウトの rowspan colspan 属性と同様の感じです。
それほど難しくないと思いますから、いろいろお試しになってはいかがですか？

Comments

[thinkmad83989]

なるほど、rowspan colspanをイメージするとわかりやすかったです。ありがとうございました。