CSS Grid 排版的基礎排列

Grid 很適合處理二維版面，尤其當卡片數量與內容長度不固定時。

先畫出格線

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

每個 1fr 會均分可用空間，間距由 gap 一次處理，不用在卡片上掛一堆外距。

第一張卡片跨欄

.featured {
  grid-column: span 2;
}

這個寫法適合拿來做出稍微不同節奏的專欄，但不要每種版面都強制跨欄，否則讀者反而抓不到閱讀順序。

窄螢幕退回單欄

@media (max-width: 640px) {
  .posts {
    grid-template-columns: 1fr;
  }

  .featured {
    grid-column: auto;
  }
}

先決定桌面想要的資訊密度，再逐步收成適合手機的單欄。斷點不一定要多，整齊比較重要。