Zenn
Open3

グリッドレイアウトを理解したい

CSS
ヤナギヤナギ

grid-template-*

セルの位置とサイズの両方を定義する

// 縦2行に分割、それぞれの行の高さを100pxに定義
.grid {
    grid-template-rows: 100px 100px;
}

// 横2列に分割、それぞれの列の幅を100pxに定義
.grid {
    grid-template-columns: 100px 100px;
}

grid-auto-*

セルのサイズのみを定義する

// 行の高さを100pxに定義
.grid {
    grid-auto-rows: 100px;
}

// 列の幅を100pxに定義
.grid {
    grid-auto-columns: 100px;
}
ヤナギヤナギ

subgrid を使って grid を入れ子にする

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}