CSS Grid 筆記 16-Grid-Auto-Flow Dense Block Fitting

此篇介紹 grid-auto-flow 這屬性設定

Demo | Github

grid-auto-flow dense Block Fitting

來個示範範例， HTML 先建立 70 個項目來，使用 nth-child 來設定 css ， 6 的倍數 item 就跨越 6 個欄位

<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        ...
        <div class="item item70">70</div>
    </div>

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(10, 1fr);
}

.item:nth-child(6n) {
    background: cornflowerblue;
    grid-column: span 6;
}

如圖片示範，會有空白的空格，假如想要有效的利用所有空間的話，可以利用 dense 這個設定值，設定 grid-auto-flow ， dense 會最大化利用表格空間

線上展示

可以測試 grid-auto-flow 屬性設定 column dense 與 row dense

筆記與備註事項

grid-auto-flow

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
資料來源 - MDN

參考資料

• CSS-Grid 課程
• 作者 Wes Bos CSS-Grid Github
• 我的 CSS-Grid 練習Github