Tailwind CSS Grid #

<!-- 块级网格容器 -->
<div class="grid">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 内联网格容器 -->
<div class="inline-grid">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 1 列 -->
<div class="grid grid-cols-1">
  <div>项目</div>
</div>

<!-- 2 列 -->
<div class="grid grid-cols-2">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 3 列 -->
<div class="grid grid-cols-3">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 4/5/6/12 列 -->
<div class="grid grid-cols-4">...</div>
<div class="grid grid-cols-5">...</div>
<div class="grid grid-cols-6">...</div>
<div class="grid grid-cols-12">...</div>

<!-- 移动端 1 列，平板 2 列，桌面 3 列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<div class="grid grid-flow-col">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- 自动填充，最小 200px -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">
  <div>项目</div>
</div>

<!-- 自动适应，最小 200px -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))]">
  <div>项目</div>
</div>

<!-- 自定义列宽 -->
<div class="grid grid-cols-[200px_1fr_200px]">
  <div>左侧栏</div>
  <div>主内容</div>
  <div>右侧栏</div>
</div>

<!-- 混合单位 -->
<div class="grid grid-cols-[1fr_2fr_1fr]">
  <div>1 份</div>
  <div>2 份</div>
  <div>1 份</div>
</div>

<!-- 1 行 -->
<div class="grid grid-rows-1">
  <div>项目</div>
</div>

<!-- 2/3/4/5/6 行 -->
<div class="grid grid-rows-2">...</div>
<div class="grid grid-rows-3">...</div>
<div class="grid grid-rows-4">...</div>
<div class="grid grid-rows-5">...</div>
<div class="grid grid-rows-6">...</div>

<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">
  <header>头部</header>
  <main>主内容</main>
  <footer>底部</footer>
</div>

<!-- 按行排列（默认） -->
<div class="grid grid-flow-row grid-cols-3">
  <div>项目</div>
</div>

<!-- 按列排列 -->
<div class="grid grid-flow-col grid-rows-3">
  <div>项目</div>
</div>

<!-- 稀疏排列 -->
<div class="grid grid-flow-dense">
  <div>项目</div>
</div>

<!-- 按行稀疏排列 -->
<div class="grid grid-flow-row-dense">
  <div>项目</div>
</div>

<!-- 按列稀疏排列 -->
<div class="grid grid-flow-col-dense">
  <div>项目</div>
</div>

<!-- 跨 1 列（默认） -->
<div class="col-span-1">跨 1 列</div>

<!-- 跨 2 列 -->
<div class="col-span-2">跨 2 列</div>

<!-- 跨 3 列 -->
<div class="col-span-3">跨 3 列</div>

<!-- 跨所有列 -->
<div class="col-span-full">跨所有列</div>

<!-- 从第 1 列开始，到第 3 列结束 -->
<div class="col-start-1 col-end-3">跨 2 列</div>

<!-- 从第 2 列开始，跨 3 列 -->
<div class="col-start-2 col-span-3">从第 2 列开始跨 3 列</div>

<!-- 自动 -->
<div class="col-auto">自动</div>

<!-- 跨 1 行（默认） -->
<div class="row-span-1">跨 1 行</div>

<!-- 跨 2 行 -->
<div class="row-span-2">跨 2 行</div>

<!-- 跨 3 行 -->
<div class="row-span-3">跨 3 行</div>

<!-- 跨所有行 -->
<div class="row-span-full">跨所有行</div>

<!-- 从第 1 行开始，到第 3 行结束 -->
<div class="row-start-1 row-end-3">跨 2 行</div>

<!-- 从第 2 行开始，跨 3 行 -->
<div class="row-start-2 row-span-3">从第 2 行开始跨 3 行</div>

<style>
  .grid-layout {
    grid-template-areas:
      "header header header"
      "sidebar main main"
      "footer footer footer";
  }
</style>

<div class="grid grid-cols-3 grid-rows-3">
  <header class="[grid-area:header]">头部</header>
  <aside class="[grid-area:sidebar]">侧边栏</aside>
  <main class="[grid-area:main]">主内容</main>
  <footer class="[grid-area:footer]">底部</footer>
</div>

<!-- 起点（默认） -->
<div class="grid justify-items-start">
  <div>项目</div>
</div>

<!-- 终点 -->
<div class="grid justify-items-end">
  <div>项目</div>
</div>

<!-- 居中 -->
<div class="grid justify-items-center">
  <div>项目</div>
</div>

<!-- 拉伸 -->
<div class="grid justify-items-stretch">
  <div>项目</div>
</div>

<!-- 起点 -->
<div class="grid items-start">
  <div>项目</div>
</div>

<!-- 终点 -->
<div class="grid items-end">
  <div>项目</div>
</div>

<!-- 居中 -->
<div class="grid items-center">
  <div>项目</div>
</div>

<!-- 拉伸（默认） -->
<div class="grid items-stretch">
  <div>项目</div>
</div>

<div class="grid justify-start">起点</div>
<div class="grid justify-end">终点</div>
<div class="grid justify-center">居中</div>
<div class="grid justify-between">两端</div>
<div class="grid justify-around">环绕</div>
<div class="grid justify-evenly">均匀</div>

<div class="grid content-start">起点</div>
<div class="grid content-end">终点</div>
<div class="grid content-center">居中</div>
<div class="grid content-between">两端</div>
<div class="grid content-around">环绕</div>
<div class="grid content-evenly">均匀</div>

<!-- 行方向 -->
<div class="justify-self-auto">自动</div>
<div class="justify-self-start">起点</div>
<div class="justify-self-end">终点</div>
<div class="justify-self-center">居中</div>
<div class="justify-self-stretch">拉伸</div>

<!-- 列方向 -->
<div class="self-auto">自动</div>
<div class="self-start">起点</div>
<div class="self-end">终点</div>
<div class="self-center">居中</div>
<div class="self-stretch">拉伸</div>

<!-- 统一间隙 -->
<div class="grid grid-cols-3 gap-4">
  <div>项目</div>
</div>

<!-- 行间隙 -->
<div class="grid grid-cols-3 gap-x-4">
  <div>项目</div>
</div>

<!-- 列间隙 -->
<div class="grid grid-cols-3 gap-y-4">
  <div>项目</div>
</div>

<!-- 自动列宽 -->
<div class="grid auto-cols-auto">自动</div>
<div class="grid auto-cols-min">最小内容</div>
<div class="grid auto-cols-max">最大内容</div>
<div class="grid auto-cols-fr">1fr</div>

<!-- 自动行高 -->
<div class="grid auto-rows-auto">自动</div>
<div class="grid auto-rows-min">最小内容</div>
<div class="grid auto-rows-max">最大内容</div>
<div class="grid auto-rows-fr">1fr</div>
<div class="grid auto-rows-[100px]">100px</div>

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">项目 1</div>
  <div class="bg-blue-500 p-4">项目 2</div>
  <div class="bg-blue-500 p-4">项目 3</div>
  <div class="bg-blue-500 p-4">项目 4</div>
  <div class="bg-blue-500 p-4">项目 5</div>
  <div class="bg-blue-500 p-4">项目 6</div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="bg-white rounded-lg shadow p-6">卡片 1</div>
  <div class="bg-white rounded-lg shadow p-6">卡片 2</div>
  <div class="bg-white rounded-lg shadow p-6">卡片 3</div>
  <div class="bg-white rounded-lg shadow p-6">卡片 4</div>
</div>

<div class="grid grid-cols-[200px_1fr_200px] grid-rows-[auto_1fr_auto] min-h-screen">
  <header class="col-span-3 bg-gray-100 p-4">头部</header>
  <aside class="bg-gray-200 p-4">左侧栏</aside>
  <main class="bg-white p-4">主内容</main>
  <aside class="bg-gray-200 p-4">右侧栏</aside>
  <footer class="col-span-3 bg-gray-100 p-4">底部</footer>
</div>

<div class="grid grid-cols-4 grid-rows-[auto_repeat(3,1fr)] gap-4 min-h-screen">
  <header class="col-span-4 bg-white shadow p-4">头部</header>
  <aside class="row-span-3 bg-gray-100 p-4">侧边栏</aside>
  <main class="col-span-3 bg-white p-4">主内容</main>
  <div class="col-span-3 bg-gray-50 p-4">底部区域</div>
</div>

<div class="grid grid-cols-4 grid-rows-2 gap-2 h-96">
  <div class="col-span-2 row-span-2 bg-gray-300">大图</div>
  <div class="bg-gray-300">小图 1</div>
  <div class="bg-gray-300">小图 2</div>
  <div class="bg-gray-300">小图 3</div>
  <div class="bg-gray-300">小图 4</div>
</div>

<form class="grid grid-cols-2 gap-4">
  <div class="col-span-2">
    <label>标题</label>
    <input class="w-full border rounded p-2">
  </div>
  <div>
    <label>名字</label>
    <input class="w-full border rounded p-2">
  </div>
  <div>
    <label>姓氏</label>
    <input class="w-full border rounded p-2">
  </div>
  <div class="col-span-2">
    <label>描述</label>
    <textarea class="w-full border rounded p-2"></textarea>
  </div>
  <div class="col-span-2">
    <button class="bg-blue-500 text-white px-4 py-2 rounded">提交</button>
  </div>
</form>

<div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  <div class="bg-white rounded-lg shadow p-6">卡片 1</div>
  <div class="bg-white rounded-lg shadow p-6">卡片 2</div>
  <div class="bg-white rounded-lg shadow p-6">卡片 3</div>
</div>