Grid 使用 justify-content start 水平靠左 | 點燈坊

Grid 若要使 Column 或 Content 水平靠左，可使用 justify-content start。

Version

CSS 3

Column Left

所有 column 水平靠左。

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

<style lang='stylus' scoped>
section
  display grid
  grid-auto-flow column
  justify-content start
</style>

12 行

section
  display grid
  grid-auto-flow column
  justify-content start

設定 section style：

• display grid：設定子層使用 Grid
• grid-auto-flow column：自動根據資料產生 column
• justify-content start：所有 column 水平靠左

Content Left

每個 column 內 content 水平靠左。

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

<style lang='stylus' scoped>
section
  display grid
  grid-template-columns repeat(3, 1fr)

div
  display grid
  justify-content start
</style>

12 行

section
  display grid
  grid-template-columns repeat(3, 1fr)

設定 section style：

• display grid：設定子層使用 Grid
• grid-template-columns repeat(3, 1fr)：設定 3 個 column 並水平均分

16 行

div
  display grid
  justify-content start

設定 div style：

• display grid：在每個 column 再度使用 Grid
• justify-content start：讓 column 內 content 水平靠左

Conclusion

• justify-content start 有兩種用途：若用在父層則是將所有 column 水平靠左；若用在子層則是將 content 水平靠左

Reference

MDN, justify-content