css グリッドレイアウト

横幅を指定：grid-template-columns
縦幅を指定：grid-template-rows
隙間を指定：gap

■交互にレイアウトを配置したり、自在にやる
grid-template-areas: “. A” “B A”
“. A”
“C A”
“D D”;
※.は空白
.item1 {
grid-area: A;
}
.item2 {
grid-area: B;
}
.item3 {
grid-area: C;
}
.item4 {
grid-area: D;
}

■セルを結合したい
名前をつけるやり方

.container {
display: grid;
grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d]; grid-template-rows: [1] 200px [2] 200px [3]; gap: 10px;
}
.item1 {
grid-column-start: a;
grid-column-end: c;
grid-row-start: 1;
grid-row-end: 3;
}

番号で指定するやり方

.item1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1; grid-row-end: 3;
}

■サイズの調整
auto　長さを自動調整
fr　割合で自動分割
grid-template-columns: auto auto auto;
grid-template-columns: 1fr 2fr 3fr;

■セルないの位置指定
justify-items: center;
align-items: center;

幅いっぱいに
justify-items: stretch;
align-items: stretch;