CSS Grid 筆記 06-CSS Grid-Auto-Flow Explained

grid-auto-flow

css grid 筆記 05提到了 grid-auto-columns 但是在其範例中看不到 column 自動增長，其設定需要透過 grid-auto-flow

Demo | Github

當不使用 grid-auto-flow 的時候，會依照設定的 grid-template-columns 數量去設定 column ，但假如是 row 的話，還是會自動增加，此部分可以參考css grid 筆記 05，grid-auto-flow 設定了 column 後，假如有超出 template 的設定，就會依照 grid-auto-columns 設定的大小去調整新增加的 column

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 400px 200px;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
}

grid-auto-flow

grid-auto-flow 属性通过控制自动布局算法的运作原理，精确指定自动布局的元素在网格中排列的方向。
資料來源 - MDN

參考資料

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