https://benzhub.github.io/tags/grid/Recent content in Grid on BenzHubHugozh-TWMon, 10 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/010-grid/Mon, 10 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/010-grid/<blockquote> <p>在 <strong>TailwindCSS</strong> 裡，<strong>Grid</strong> 是專為「二維版面」設計的排版引擎——只要對容器寫上 <code>grid</code>，再用 <code>grid-cols-*</code> 決定幾欄、<code>grid-rows-*</code> 決定幾列、<code>col-span-*</code> 讓子項跨欄、<code>gap-*</code> 拉開間距，就能一組 utility 搭出相簿網格、儀表板、複雜頁面骨架這些過去得寫一大段 CSS 才能完成的版面。這是 <strong>TailwindCSS 完整教學</strong> 系列的第十篇，我們會把整套 Grid 工具類從容器到子項、從隱式軌道到 v4 全新的 subgrid 一次講透，並以 v4 為預設、標註與 v3 的差異。</p> </blockquote>