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