點燈坊

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

Grid 使用 col-start- 與 col-end- 調整 Item 位置

Sam Xiao's Avatar 2021-05-06

透過 col-start- / col-end- 可將 Item 原本在 HTML 位置調整到指定位置。

Version

Tailwind CSS 2.1.1

col-start- / col-end-

col-start000

原本 HTML 的 1 在左上角位置,但經由 CSS 調整後改到第二列中間,2 則向左遞補,6 則向右位移。

<template lang="pug">
.grid.grid-cols-3
  .col-start-2.row-start-2.bg-red-500 1
  div 2
  div 3
  div 4
  div 5
  div 6
</template>

第 2 行

.grid.grid-cols-3

設定父層 box style:

  • grid:設定子層使用 Grid
  • grid-cols-3:設定子層自動分配寬度成三個 column

第 3 行

.col-start-2.row-start-2.bg-red-500 1

設定子層 item 1 style:

  • col-start-2:設定目標位置的 column 起始位置
  • row-start-2:設定目標位置的 row 起始位置
  • bg-red-500:設定背景顏色

當沒有設定 -end 時,預設為橫跨一個 item

Multiple Item

col-start001

col-start-col-end- 除了能調整 item 位置外,還可設定橫跨數個 item。

<template lang="pug">
.grid.grid-cols-3
  .col-start-1.col-end-3.row-start-2.bg-red-500 1
  div 2
  div 3
  div 4
  div 5
  .col-start-1.col-end-4.row-start-3.bg-green-500 6
</template>  

第 3 行

.col-start-1.col-end-3.row-start-2.bg-red-500 1

設定子層 item 1 style:

  • col-start-1:設定目標位置的 column 起始位置
  • col-end-3:設定目標位置的 column 結束位置
  • row-start-2:設定目標位置的 row 起始位置
  • bg-red-500:設定背景顏色

第 8 行

.col-start-1.col-end-4.row-start-3.bg-green-500 6

設定子層 item 6 style:

  • col-start-1:設定目標位置的 column 起始位置
  • col-end-4:設定目標位置的 column 結束位置
  • row-start-3:設定目標位置的 row 起始位置
  • bg-green-500:設定背景顏色

Conclusion

  • 若 span 數為 1,可省略設定 col-end-
  • Grid 多設定在父層,但 col-startcol-end- 系列是設定在子層

Reference

Tailwind CSS, Grid Column Start / End