RAM (重複、自動、Minmax)

在這七個範例中，結合您已學到的部分概念，建立具有自動放置位置和彈性子項的回應式版面配置。真不錯。這裡提及的重要詞彙是 repeat、auto-(fit|fill) 和 minmax()，也就是縮寫的 RAM 名稱。

整體來說，這看起來會像這樣：

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

您目前再次使用 repeat()，但這次使用的是 auto-fit 關鍵字，而不是明確的數值。即可自動放置這些子元素。這些子項的基本值是 150px，最大值為 1fr，也就是說在較小的螢幕上，佔滿 1fr 寬度，當達到 150px 的寬度時，這些子項會集中在同一行。

有了 auto-fit，所有完全空白的曲目都會收合為 0，已填滿的曲目則會增加佔用儲存空間的空間。不過，如果將值變更為 auto-fill，空白測試群組就會佔用與填入內容相同的空間：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

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