25 网格行 Grid Row

联系表单 示例 25a

我们来看一个联系表单，第一列包含几个字段，第二列包含一个字段。之前我们见过跨列的网格项目，这里有一个网格项目还进行了跨行。概念是相同的。

标记

<form class="grid grid-cols-2 gap-6">
  <div>
    <label>...</label>
    <input ... />
  </div>
  <div>
    <label>...</label>
    <input ... />
  </div>
  <div class="message-block">
    <label>...</label>
    <textarea>...</textarea>
  </div>
  <button class="col-span-full">...</button>
</form>

解决方案

<form class="grid grid-cols-2 gap-6">
  ...
  <div class="col-start-2 row-start-1 row-end-3">
    <label>...</label>
    <textarea>...</textarea>
  </div>
  <button class="col-span-full">...</button>
</form>

Working Demo

我们已经学习过col-start系列的实用类。现在，我们要使用两个新的实用类：row-start-*和row-end-*。

理解 Row Start 和 Row End 概念

row-start-* 和 row-end-* 实用工具类也是网格项的属性。row-start-* 根据行线指定网格项的起始位置，row-end-* 则根据行线指定网格项的结束位置。

在上一个示例中，我们希望消息块从第 1 行线开始，到第 3 行线结束，并且从第 2 列线开始。指定所有这些行线和列线非常重要。

Tailwind 中可用的实用类与col-start-*和col-end-*类似。

理解行跨越 Row Span 概念

与col-span-*实用类类似，我们也有row-span-*实用类，用于指定网格项跨越的行数。它通常与row-start-*或row-end-*一起使用。但如果单独使用，会采用默认的起始和结束行线。Tailwind 中可用的实用类有row-span-1到row-span-12，还有一个很有用的row-span-full，它能让网格项跨越网格中的所有列。

**注意：**最好使用起始 start 和结束 end 实用类，而不是跨越 span 实用类。

响应式服务组件 示例 25b

灵感来自 Brian Haferkamp 的 CodePen，用户插图来自 Storyset

这是一个包含一张图片和六项服务的部分，在三种不同的屏幕尺寸下显示效果各异。移动设备布局有一列，平板设备布局有两列，桌面设备布局有三列。但更重要的是，网格项的位置会发生变化。现在使用col-start、col-end、row-start和row-end来实现这一点非常简单。

Try it out

标记

<section class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-8">
  <img ... />
  <div>...</div>
  <div>...</div>
</section>

解决方案

遵循移动优先的方法，我们从单列开始，在sm断点处变为两列，在md断点处变为三列。

<section class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-8">
  <img class="sm:row-start-1 sm:row-end-3 md:row-end-2 md:col-start-2" ... />
  <div class="md:col-start-1 md:text-right">...</div>
  <div class="sm:col-start-2 md:col-start-3">...</div>
</section>

我们在sm和md断点处更改了图片和两个div的行线和列线。查看实际演示，并仔细观察是如何实现的。

Working Demo

客户评价网格部分 示例 25c

来自 Frontend Mentor 的挑战

这是另一个来自 Frontend Mentor 网站的示例，为了简化，去掉了头像和名字。采用移动优先的方法，在移动设备上只有一列，在lg断点以上，尝试实现如下布局。

Try it out

标记

<section>
  <div class="violet">...</div>
  <div class="gray">...</div>
  <div class="white">...</div>
  <div class="dark">...</div>
  <div class="white-long">...</div>
</section>

解决方案

在移动设备上，你只需对section应用grid和gap-8，一切就会正常显示。在lg断点以上，你需要创建四列，并且几乎每个网格项都需要使用行线和列线来定位。

<section class="grid lg:grid-cols-4 gap-8">
  <div class="violet lg:col-span-2">...</div>
  <div class="gray">...</div>
  <div class="white lg:row-start-2">...</div>
  <div class="dark lg:col-span-2">...</div>
  <div class="white-long lg:row-start-1 lg:row-span-2 lg:col-start-4">...</div>
</section>

最重要的是.white-long这个div的定位。你需要同时指定行线和列线。这里我使用了row-span-2，但你也可以使用row-end-3。

Working Demo