Grid 之 auto-fill vs. auto-fit | 點燈坊

若想不寫 Media Query 而讓 Grid 自動根據 Browser 寬度改變且換行， 可使用 repeat() 搭配 auto-fill 與 auto-fit 由 Browser 決定 Column 數。

Version

CSS 3

auto-fill

使用 repeat() 搭配 auto-fill，當 browser 寬度大於所有 column 寬度總合時，可發現自動產生不少 column 但沒有內容。

<template lang='pug'>
section
  div 1
  div 2
  div 3
  div 4
  div 5
  div 6
</template>

<style lang='sass' scoped>
section
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
</style>

12 行

section
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))

設定父層 section style：

• display: grid：設定子層使用 Grid
• grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))：由 auto-fill 決定 repeat() 的 column 數，最小為 100px，最大為 1fr

auto-fill 會盡可能產生更多 column，儘管 column 內沒有任何內容，這也是為什麼 6 之後還有 column 數字，且佔據一些空間，而無法如預期使用 1fr 會水平均分 browser 寬度

auto-fit

使用 repeat() 搭配 auto-fit，當 browser 寬度大於所有 column 寬度總合時，仍可水平均分 browser 寬度。

<template lang='pug'>
section
  div 1
  div 2
  div 3
  div 4
  div 5
  div 6
</template>

<style lang='sass' scoped>
section
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
</style>

12 行

section
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))

設定父層 section style：

• display: grid：設定子層使用 Grid
• grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))：由 auto-fill 決定 repeat() 的 column 數，最小為 100px，最大為 1fr

auto-fit 也會如同 auto-fill 盡可能產生更多 column，但 auto-fit 會使沒有內容 column 的 width 為 0，因此不會佔據寬度，所以 auto-fit 看起來像水平均分 browser 寬度

Conclusion

• auto-fill 與 auto-fit 都可根據 browser 寬度決定 column 數與自動換列，且會盡可能產生更多 column，唯 auto-fit 會將沒有內容 column 的 width 為 0，因此不會佔據寬度，看起來像水平均分 browser 寬度