CSSでグリッドレイアウトをしてみよう-実践編

この2つのコードは、書き方は違いますが同じ指定になります。
spanを使った指定はテーブルレイアウトのrowspan,colspanと考え方が近いので、わかりやすいと思う人も多いかもしれません。

他にも以下のコードのようにセルに名前をつけて指定する方法もあります。
個人の場合はお好みの書き方を、チームで作る場合はルールを定めて混乱が起きないように気をつけてくださいね。

cssbody {
    display: grid;
    min-height: 100vh;
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 100px 1fr;
    // グリッドセルに自由に名前をつけます。
    grid-template-areas:
        "header header"  // ダブルクオーテーションで囲まれたものがグリッドの一行になります。
        "nav contents"
        "footer footer";
}
header {
    grid-area: header;
}
main {
    grid-area: contents;
}
nav {
    grid-area: nav;
}
footer {
    grid-area: footer;
}

はじめてコードを見たときに、直感的に理解しやすいと思います。
ショートハンドを使えば幅や高さも名前も一気につけることができますが、みやすさ重視で私はrows,columns,areasにわけた書き方が好みです。

サンプルでは2カラムレイアウトでしたが、カラム数が増えても対応が簡単ですね。

パネル型レイアウト

次は、リストアイテムをパネル型にレイアウトする方法です。

まずは、このように整然と並ばせるにはアイテム側にはとくに指定をしなくても、グリッドコンテナを生成すれば自動的に左上から行を埋めて配置されます。

HTML<ul id="list">
    <li id="listitem-A">A</li>
    <li id="listitem-B">B</li>
    <li id="listitem-C">C</li>
    <li id="listitem-D">D</li>
    <li id="listitem-E">E</li>
    <li id="listitem-F">F</li>
</ul>

css#list {
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 200px 200px 200px;
}

css#list {
    display: grid;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-columns: 200px 200px 200px;
    grid-auto-flow: dense; // できるだけ敷き詰める指定
}
#listitem-B,
#listitem-C {
    grid-row: span 2;
    grid-column: span 2;
}