點燈坊

失くすものさえない今が強くなるチャンスよ

Grid 使用 row-gap 設定 Item 垂直間距

Sam Xiao's Avatar 2021-04-17

Grid 屬於父層設定的 Layout,可直接在父層以 row-gap 設定垂直 Item 間隔。

Version

CSS 3

row-gap

gap000

每個 item 間在垂直方向都有間距。

<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: auto auto auto
  row-gap: 10px
</style>

12 行

section
  display: grid
  grid-template-columns: auto auto auto
  row-gap: 10px

設定父層 section style:

  • display: grid:設定子層使用 Grid
  • grid-template-columns: auto auto auto:argument 個數決定 column 個數,若要由 browser 自行根據剩餘寬度分配則填入 auto
  • row-gap: 10px:設定 item 間垂直 gap

row-gap: 10px 也可使用 gap: 10px 0 取代

Conclusion

  • row-gap 舊稱為 grid-row-gap,但已經 deprecated,建議改用 row-gap 取代

Reference

MDN, row-gap