https://benzhub.github.io/tags/%E7%89%88%E5%9E%8B/Recent content in 版型 on BenzHubHugozh-TWFri, 14 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/014-common-layouts/Fri, 14 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/014-common-layouts/<blockquote> <p>版面章走到這裡，你手上已經集滿了 <strong>Flexbox</strong>、<strong>Grid</strong>、定位、間距與尺寸五套工具。這一篇不再教新 utility，而是把它們<strong>串成真正能用的版面骨架</strong>——垂直水平<strong>置中</strong>、<strong>Sticky Footer</strong> 黏底頁尾、<strong>Holy Grail</strong>（三欄聖杯）、後台 <strong>Sidebar</strong> 版面、響應式<strong>卡片網格</strong>與 <strong>Media Object</strong>。每一種都附上可直接貼進頁面執行的 <strong>TailwindCSS</strong> v4 範例，並清楚說明何時該用 flex、何時該用 grid，讓你從「認得每顆工具」躍升到「一眼就知道該用哪套組合」。這是 <strong>TailwindCSS 完整教學</strong> 系列的第十四篇，也是版面章（TW-3）的收尾。</p> </blockquote>