グリッドレイアウト よく使うものまとめ

グリッドシステムでのレイアウト
#container {
    display: grid;
    grid:
        "areaA areaB areaC" 100px
        "areaD areaE areaF" 100px
        / 200px 200px 200px;
    grid-gap: 10px 20px;
}

//レスポンシブで1行のアイテム数が変わるとき
#container {
    display: grid;
    grid: auto-flow 100px / repeat(auto-fit, minmax(300px, 1fr));
//コンテナの幅に収まるように高さ100px, 幅300pxの列が追加されていき、余った幅は各列に分配
//はみ出したアイテムは改行される
}
//flexboxで同じことする場合
//とはいえタイル状のレイアウトはgrid-layoutのほうが適してる
#container {
    display: flex;
    flex-wrap: wrap;
}
#items {
    flex: 1 0 300px;
}

//itemの配置
#itemA {
    grid-area: 1/3 / 2/4; //(row, column)=(1,3)〜(2,4)を指定
    grid-area: areaA; //コンテナで作ったareaAを指定
}

//細かい位置調整
#itemA {
    justify-self: center; //アイテムの横方向の位置を指定する
    align-self: center;  //アイテムの縦方向の位置を指定する
}

テクニカルライティング的な考えだと
"手段→結果" よりも "結果→手段" のほうがわかりやすいらしい
例えると
"このボタンを押すとテレビがつく" よりも
"テレビをつけるにはこのボタンを押す" のほうがわかりやすい
ということでプロパティごとではなく、目的を先にしてまとめてみた。