グリッドレイアウト ショートハンド

//grid-template
//これはめっちゃ読みやすいから使うように
#container {
    grid-template:
        "areaA areaB areaC" 100px
        "areaD areaE areaF" 100px
        / 200px 200px 200px;
}

// grid-gap
// これも積極的に使うべし
#container1 {
    grid-row-gap: 10px;
    grid-column-gap: 20px;

    /* ↓このようにも書ける */
    grid-gap: 10px 20px;
}
#container2 {
    grid-row-gap: 10px;
    grid-column-gap: 10px;

    /* ↓このようにも書ける */
    grid-gap: 10px;
}

// grid-areaでライン番号を指定する
// grid-row: 行始 / 行終; grid-column: 列始 / 列終; → gird-area: 行始/列始 / 行終/列終;
// 範囲の左上と右下のマスを指定してるイメージ持つとわかりやすい
#itemA {
    grid-row: 1 / 2;
    grid-column: 3 / 4;

    /* ↓このようにも書ける */
    grid-area: 1/3 / 2/4;
}
#itemB {
    grid-row: 1;
    grid-column: 3;

    /* ↓このようにも書ける */
    grid-area: 1 / 3;
}

CSS Grid Layout を極める！（場面別編）