Day 14 - Grid 排版

如果上一篇威尔猪讲的 Flex 是十字形排版法，那今天讲的 Grid 就属於棋盘格排版法。它比 Flex 难了一些，毕竟要兼顾栏与列，创造出格子状的区块，才能在格子里放入项目。(横向为行 Row，纵向为列 Column)。讲到 Grid 就必须提到一个特殊的单位 fr，它的全名是 Fraction (几分之几的那个分数)，我们可以用它来设定格子的相对宽度，这样格子就能作响应式缩放，Tailwind 已帮我们预设每个宽度为 1fr。那我们来看看基本的 Grid 该怎麽使用吧。

Grid Template Columns

Tailwind 的 Columns 也是和 Bootstrap 一样预设分成 12 列 (要记得纵向为列)，如果我们要创建 4 列，该怎麽写呢？看以下范例：

<div class="grid grid-cols-4 gap-4">
    <div class="h-16 bg-red-300">1</div>
    <div class="h-16 bg-red-300">2</div>
    <div class="h-16 bg-red-300">3</div>
    <div class="h-16 bg-red-300">4</div>
    <div class="h-16 bg-red-300">5</div>
    <div class="h-16 bg-red-300">6</div>
    <div class="h-16 bg-red-300">7</div>
</div>

Grid Template Rows

预设分为 6 行 (要记得横向为行)，如果我们要创建 4 行，该怎麽写呢？看以下范例：

<div class="grid grid-rows-4 grid-flow-col gap-4">
    <div class="h-16 bg-red-300">1</div>
    <div class="h-16 bg-red-300">2</div>
    <div class="h-16 bg-red-300">3</div>
    <div class="h-16 bg-red-300">4</div>
    <div class="h-16 bg-red-300">5</div>
    <div class="h-16 bg-red-300">6</div>
    <div class="h-16 bg-red-300">7</div>
</div>

这边注意不能只单写行，因为 Tailwind 不知道你列要怎麽排，就会以为你只需要 1 列，那行数就会一直往下排，看起来就只会有一行。

Column Span / Start / End

.col-span

使用 col-span-{n} 来跨越 n 列。看以下范例：

<div class="grid grid-cols-4 gap-4">
    <div class="h-16 bg-red-300">1</div>
    <div class="h-16 bg-red-300">2</div>
    <div class="h-16 bg-red-300">3</div>
    <div class="h-16 bg-yellow-300 col-span-3">4</div>
    <div class="h-16 bg-red-300">5</div>
    <div class="h-16 bg-red-300">6</div>
    <div class="h-16 bg-red-300">7</div>
</div>

.col-start / .col-end

使用 col-start-{n} 和 col-end-{n}，让元素从第 n 条格线为起点或终点。看以下范例：

<div class="grid grid-cols-4 gap-4">
    <div class="h-16 bg-red-300">1</div>
    <div class="h-16 bg-red-300">2</div>
    <div class="h-16 bg-red-300">3</div>
    <div class="h-16 bg-yellow-300 col-span-3 col-start-2 col-end-6">4</div>
    <div class="h-16 bg-red-300">5</div>
    <div class="h-16 bg-green-300 col-start-3 col-span-2">6</div>
    <div class="h-16 bg-red-300">7</div>
</div>

col-star 和 col-end 可以分开在各元素上写，不一定需要合在一起写，但如果分开写，记得要搭配 col-span，不然 Tailwind 会不知道你要从哪条格线开始结束或要合并几列。

Row Span / Start / End

基本上用法和列 (Column) 一样，只是列为横向合并，行 (Row) 为纵向合并 (还记得横向为行吧，所以要往下合并)。看以下范例：

<div class="grid grid-rows-4 grid-flow-col gap-4">
    <div class="h-16 bg-red-300">1</div>
    <div class="bg-yellow-300 row-start-1 row-end-5">2</div>
    <div class="h-16 bg-red-300">3</div>
    <div class="bg-green-300 row-start-2 row-span-3">4</div>
    <div class="h-16 bg-red-300">5</div>
    <div class="h-16 bg-red-300 ">6</div>
    <div class="h-16 bg-red-300">7</div>
</div>

这边要注意的是，CSS 格线从 1 开始，而不是 0，所以 3 行或 3 列格线是从第 1 条格线开始算起，到第 4 条格线结束。

Grid Auto Flow

这是用来控制网格中元素自动排列的功能，还记得上面的 Rows 范例，因为威尔猪并没有设定 Columns，所以直接使用 grid-flow-col 来自动排列，想对它操控自如，可能需要进阶的 Grid 知识了。用法为：grid-flow-{keyword}，Tailwind 预设为 grid-flow-row。基本上** grid-flow-row** 为多的格子会自动横向排列；** grid-flow-col** 为多的格子会自动纵向排列；** grid-flow-row** 为多的格子会自动用空白来填充，同学们只要知道有这功能就可以了。来看以下范例：

同学们注意看排序方向：

<div class="grid grid-cols-3 grid-rows-2 grid-flow-row gap-4">
    <div class="flex justify-center items-center bg-red-300 row-start-1 row-span-2">1</div>
    <div class="h-16 flex justify-center items-center bg-red-300">2</div>
    <div class="h-16 flex justify-center items-center bg-green-300">3</div>
    <div class="h-16 flex justify-center items-center bg-red-300">4</div>
    <div class="h-16 flex justify-center items-center bg-red-300">5</div>
</div>

2、3、4、5 为横向排列。

<div class="grid grid-cols-3 grid-rows-2 grid-flow-col gap-4">
    <div class="flex justify-center items-center bg-red-300 row-start-1 row-span-2">1</div>
    <div class="h-16 flex justify-center items-center bg-red-300">2</div>
    <div class="h-16 flex justify-center items-center bg-green-300">3</div>
    <div class="h-16 flex justify-center items-center bg-red-300">4</div>
    <div class="h-16 flex justify-center items-center bg-red-300">5</div>
</div>

2、3、4、5 为纵向排列。

Gap

Gap 用法类似於 Margin，只不过它只存在於 Grid 和 Flexbox 之间，在其他地方是没有任何作用的，用於控制格线行和列之间的间隔距离。既然 Gap 类似 Margin，当然也是有水平的 gap-x-{size} 和垂直的 gap-y-{size}，威尔猪就不列出了：

还记得间距那篇吗，没错，Gap 预设和间距比例是相同的，修改 theme.spacing 或 theme.extend.spacing 配置， Gap 也会跟着一起修改，至於只想单独增加 Gap，则修改 theme.extend.gap 就可以了。例如：

  // tailwind.config.js
  
  module.exports = {
   ...
    theme: {
      ...
      extend: {
        gap: {
         '13': '3.25rem',
        },
        ...
      },
      ...
    },
    ...
  }

以上就是 Grid 的基本认识，威尔猪只有在类似有 Gallery 的版型变化区块，才会使用到 Grid，不然一般使用 Flex 来排版就足够了。那咱们明天见。