TailwindCSS-Grid布局

### 网格布局

TailwindCSS-Grid布局官网https://tailwindcss.com/docs/grid-template-columns

Grid布局是一种强大的布局工具，它允许你使用简单的类名创建响应式的网格系统

常用的父级属性

• grid
• grid-cols-3 grid-rows-3
• gap-4 gap-x-2 gap-y-4

常用的子级属性

• col-start-1 col-end-4
• row-start-1 row-end-4 row-span-2

grid grid-cols-{n}

用于定义列数，例如，grid-cols-3 创建一个三列的网格

 <div class="grid grid-cols-3">
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
    </div>

grid grid-rows-{n}

用于定义行数，如 grid-rows-3 创建一个三行的网格

 <div class="grid grid-rows-3"> 
      <div class="box">第一行第一列</div>
      <div class="box">第一行第二列</div>
      <div class="box">第二行第一列</div> 
    </div>

gap-4是一个用于设置元素间间距的实用类flex项之间的间距

gap-x-2:是行之间的间距 gap-y-4：列之间的间距

 <div class="grid gap-y-4">
      <div class="box">Item 1</div>
      <div class="box">Item 2</div>
      <div class="box">Item 3</div>
    </div>

设置子元素属性

col-start-1 指定网格项从第一列开始

col-end-4 指定网格项到第四列结束

   <div class="grid grid-cols-6">
      <div class="col-start-1 col-end-3 bg-red-500">col-start-1 col-end-3</div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div> 
    </div>

row-start-1 指定网格项从第一行开始

row-end-4 指定网格项到第四行结束

<div class="grid grid-rows-3  ">
      <div class="row-start-2 row-end-4 bg-red-500">row-start-2 row-end-4</div>
      <div class="box"></div>
      <div class="box"></div>
    </div>