TailwindCSS Grid 布局怎么用？常用布局模式和响应式网格实战

TailwindCSS 的 Grid 类直接映射 CSS Grid 属性——grid-cols-N 设置列数，col-span-N 设置跨列，配合响应式前缀实现不同屏幕不同布局。

基本网格

html
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

grid-cols-3 = 三列等宽，gap-4 = 间距 1rem。TailwindCSS 预设 grid-cols-1 到 grid-cols-12。

响应式网格

html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 手机 1 列，平板 2 列，桌面 3 列 -->
</div>

最常见的卡片布局模式。移动端单列，平板双列，桌面三列。

跨列和跨行

html
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">占 2 列</div>
  <div>1 列</div>
  <div>1 列</div>
  <div class="col-span-4">占满整行</div>
</div>

col-span-2 跨 2 列。row-span-2 跨 2 行。col-start / col-end 精确定位。

经典布局：侧边栏 + 主内容

html
<div class="grid grid-cols-[240px_1fr] gap-6">
  <aside>侧边栏固定 240px</aside>
  <main>主内容自适应</main>
</div>

<!-- 响应式：移动端侧边栏隐藏 -->
<div class="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-6">
  <aside class="hidden lg:block">侧边栏</aside>
  <main>主内容</main>
</div>

grid-cols-[240px_1fr] 用任意值语法设置侧边栏固定宽度。

经典布局：圣杯布局

html
<div class="grid grid-cols-1 md:grid-cols-[200px_1fr_200px] gap-4">
  <header class="col-span-full">顶栏</header>
  <nav>左导航</nav>
  <main>主内容</main>
  <aside>右侧栏</aside>
  <footer class="col-span-full">底栏</footer>
</div>

col-span-full 让 header 和 footer 跨满整行。

自动填充

html
<!-- 自动填充，每列最小 200px -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
  <div>卡片</div>
  <div>卡片</div>
</div>

auto-fill 让列数根据容器宽度自动计算。适合不确定有多少项的列表。