[Tailwind CSS] 使用 Grid 來排列 RWD 版型

分享:

Tailwind CSS 的有針對 display: grid設計的 class,所以可以先去了解一下 grid 的排版概念後,再來使用 Tailwind CSS 來弄 RWD 會比較好。

因為是 grid,所以 class 加在外面那層就好了,像這樣:

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

上面的意思代表使用 display: grid,然後設定一排四個元素,還有設定一個 gap 是四個單位,這樣元素只要到第五個就會掉到下面去。

如果要讓版型在不同解析度下有變化,再加上 RWD 的 break point 就好了,比如說:

<div class="grid grid-cols-1 md:grid-cols-4">
  <!-- ... -->
</div>

這樣就代表在最小的解析度時是一排一個元素,md 的解析度以上一排四個這樣,可以依據自己的需求調整版面。

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。