點燈坊

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

使用 calc() 與 box-border 建立 RWD Column

Sam Xiao's Avatar 2021-02-16

若要建立可 RWD 的 Layout，也可藉由 calc() 與 box-border 先建立 Column，最後再將 Item 放進 Column 內。

Version

Tailwind CSS 2.0.3

box-border

box000

先建立 4 個 column，再將 item 分別放進 column 內。

<template>
  <div class="flex flex-wrap w-11/12 m-auto">
    <div class="box-border w-col-4 py-0 px-3">
      <div>1</div>
    </div>
    <div class="box-border w-col-4 py-0 px-3">
      <div>2</div>
    </div>
    <div class="box-border w-col-4 py-0 px-3">
      <div>3</div>
    </div>
    <div class="box-border w-col-4 py-0 px-3">
      <div>4</div>
    </div>
  </div>
</template>

<style scoped>
* {
  --column: 4;
}

.w-col-4 {
  width: calc(100% / var(--column));
}
</style>

第 2 行

<div class="flex flex-wrap w-11/12 m-auto">
  • flex：使用 Flexbox
  • flex-wrap：設定當各 item 總 width 超越 parent width 時會自動換行，可避免總 width 計算錯誤而不知
  • w-11/12：以 % 設定 box width，使 box 能根據 RWD 自動改變
  • m-auto：自動調整 margin 水平置中

第 3 行

<div class="box-border w-col-4 py-0 px-3">
  • box-border：由於 calc() 計算時沒有考慮 padding，因此總 width 會超越 parent width 而換行，因此將改用 box-border，如此 width 將包含 padding，content width 會自動內縮，因此總 width 不變而不會換行
  • w-col-4：設定 column width，稍後會建立 w-col-4 utility
  • py-0：設定 vertical padding
  • px-3：設定 horizontal padding

19 行

* {
  --column: 4;
}

建立 --column CSS variable，若將來改變 column，只要統一改變 --column 即可。

23 行

.w-col-4 {
  width: calc(100% / var(--column));
}

建立 w-col-4 utility，由 calc() 根據 --column 動態計算 column width。

@apply

box001

改用 @apply 將重複 utility 抽出。

<template>
  <div class="flex flex-wrap w-11/12 m-auto">
    <div class="col-4">
      <div>1</div>
    </div>
    <div class="col-4">
      <div>2</div>
    </div>
    <div class="col-4">
      <div>3</div>
    </div>
    <div class="col-4">
      <div>4</div>
    </div>
  </div>
</template>

<style scoped>
* {
  --column: 4;
}

.w-col {
  width: calc(100% / var(--column));
}

.col-4 {
  @apply box-border w-col py-0 px-3;
}
</style>

第 3 行

<div class="col-4">

由於每個 column 的 utility 都相同，因此抽出 col class。

27 行

.col-4 {
  @apply box-border w-col py-0 px-3;
}

使用 @apply 將所有 utility 整合成單一 class。

Conclusion

  • CSS function 也能搭配 Tailwind 使用，只是 Tailwind 精髓在於 utility，因此可藉由 calc() 建立 w-col-4 utility 之後，再於 HTML 組合
  • 若 HTML 發現有重複的 utility，可再使用 @apply 將重複 utility 組合成新 utility，以利將來維護

Reference

Tailwind CSS, box-border

# TailwindCSS