RAM (重複、自動、Minmax)

在這七個範例中,結合您已學到的部分概念,建立具有自動放置位置和彈性子項的回應式版面配置。真不錯。這裡提及的重要詞彙是 repeatauto-(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));
}

HTML

<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>
  

CSS


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