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

2022-01-07 21:38:37

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 的解析度以上一排四個這樣，可以依據自己的需求調整版面。

[WordPress Plugin] All-in-One WP Migration- 一鍵下載與一鍵安裝的 WP 搬家工具 [Tailwind CSS] 使用 Aspect Ratio 設置固定比例區塊

你可能也會喜歡的

FreeFrontend：免費的前端程式碼寶庫，設計與開發者的靈感來源

[Tailwind CSS] 自訂元件(component)

[Tailwind CSS] 使用 Aspect Ratio 設置固定比例區塊

CSS 3, Media Queries Cheat Sheet- 要設定 Media Query 製作 RWD 網站時的範圍建議設定

Preline UI：整合 Tailwind CSS 的免費設計系統

CSS Utility-First Fundamentals 的基礎概念介紹

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。