Tailwind CSS 网格系统

2025-06-07

Tailwind CSS 网格系统

作者：阿卜杜拉·努曼

介绍

在本文中，我们将研究如何使用TailwindCSS Grid类通过 CSS Grid 实现响应式布局。

TailwindCSS，简称 Tailwind，是一个用于快速构建网站的 CSS 框架。它包含一组核心的已定义 CSS 实用程序类，这些类可以组合并轻松自定义配置，以实现与响应式、布局和主题相关的任何设计。

使用 Tailwind 的 Flexbox 类，可以通过划分容器宽度来构建多列布局w-{fraction}。然而，在 1.2 及以上版本中，我们可以使用 Tailwind 的 CSS Grid 类构建更复杂的布局。

我们将介绍的步骤：

什么是 Tailwind 网格系统

与 Twitter 的 Bootstrap 和 Foundation 仍然使用 flexbox 实现其 12 列布局不同，Tailwind 使用 CSS Grid 允许我们构建响应式且高度可自定义的布局，包含任意数量的列和行。它附带一些 CSS 类，这些类实现了 CSS Grid 容器，名称包括grid、grid-cols-{n}和grid-rows-{n}等。它还附带一些 Grid 子类，帮助我们定义网格子元素的行为，例如col-span-{n}、row-span-{n}等。

Tailwind 的默认配置允许每屏最多显示 12 列。您可以通过tailwind.config.js文件进行自定义。此外，您还可以根据自己的喜好和需求，更改与 Tailwind CSS Grid 类相关的许多其他选项。在本文中，我们将探讨如何将列数扩展至 16 列。

在这篇文章中，我们主要会使用Tailwind Grid类的响应式应用程序，这些类允许我们在某个断点之后更改布局，例如使用grid-cols-3 md:grid-cols-3。

我建议从 TailwindCSS 参考的这一部分开始以及后续部分开始关注 Grid 类的文档。

项目目标

我们将实现一个简单的布局，其中包含导航栏、侧边内容区、主内容区和页脚。它将由三列五行组成。

div我们将从一组遵循块格式化上下文或BFC 的类开始，然后根据需要引入新类，逐步涵盖与网格格式化上下文相关的概念。

## 项目设置
在开始之前，为了做好准备，请按照以下步骤操作：

  1. 导航到您选择的文件夹并克隆此 repo
  2. 打开克隆的仓库。务必添加并启用 Live Server。

  3. 安装依赖项

    npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch

  4. 启动 Live Server 并导航到端口号。或者直接点击Go Live代码编辑器右下角的按钮：

## 基本 Tailwind 网格示例
首先，我们有以下index.html链接到 TailwindCSS 样式的文档<head>：

 <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/styles.css" rel="stylesheet">
  <title>Document</title>
  </head>
  <body>
    <div class="container m-auto">
      <div class="tile bg-teal-500">
        <h1 class="tile-marker">ONE</h1>
      </div>
      <div class="tile bg-amber-500">
        <h1 class="tile-marker">TWO</h1>
      </div>
      <div class="tile bg-yellow-500">
        <h1 class="tile-marker">THREE</h1>
      </div>
      <div class="tile bg-lime-600">
        <h1 class="tile-marker">FOUR</h1>
      </div>
      <div class="tile bg-green-600">
        <h1 class="tile-marker">FIVE</h1>
      </div>
      <div class="tile bg-emerald-500">
        <h1 class="tile-marker">SIX</h1>
      </div>
      <div class="tile bg-teal-500">
        <h1 class="tile-marker">SEVEN</h1>
      </div>
      <div class="tile bg-purple-500">
        <h1 class="tile-marker">EIGHT</h1>
      </div>
      <div class="tile bg-pink-500">
        <h1 class="tile-marker">NINE</h1>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

添加网格格式上下文

如果我们将grid类引入容器div，什么也不会发生：

<div class="container m-auto grid">
Enter fullscreen mode Exit fullscreen mode

这是因为默认值grid只有一列。

列号

让我们添加三个明确的列：

<div class="container m-auto grid grid-cols-3">
Enter fullscreen mode Exit fullscreen mode

现在，我们已div根据网格格式上下文将所有元素排列到 3 列中：

图片 1

请注意，grid-cols-3只是将屏幕分成 3 个相等的部分，1fr如下所示：grid-template-columns: repeat(3, minmax(0, 1fr));。

网格间隙

让我们用gap-{size}类添加一些间隙。我们必须将其设置为网格容器：

<div class="container m-auto grid grid-cols-3 gap-4">
Enter fullscreen mode Exit fullscreen mode

现在我们的孩子之间存在差距div：

图片 2

响应式列号

我们可以在更大的断点处添加列：

<div class="container m-auto grid grid-cols-3 md:grid-cols-5 lg:grid-cols-8 gap-4">
Enter fullscreen mode Exit fullscreen mode

在这里，我们在md: 768px和 处使用 Tailwind 的默认断点lg: 1024px。我们可以看到列数在768px和 处增加1024px：

图 3

值得注意的是，Tailwind 的响应式类（例如md和 ）lg并不代表屏幕尺寸，而是移动优先的断点。因此，它grid-cols-3为所有屏幕尺寸布局 3 列，但由于列数在md达到该屏幕尺寸后的5 列后会发生变化。由于lg达到 8 列后列数会再次发生变化，因此之后不会再发生变化，因此即使在xl、2xl屏幕尺寸下，我们仍然会获得 8 列。

尺寸和位置

Tailwind 的 CSS Grid大小和放置类使我们能够更好地控制一个部分应该跨越多少列以及我们想要从哪里开始和结束它。

使用 Span 设置尺寸

下面，我们将第一个元素放置div为导航栏。我们会col-span-{n}针对每种屏幕尺寸进行此操作。我们必须确保它从网格的起始位置开始，并在每个屏幕尺寸下覆盖整个屏幕：

<div class="tile bg-teal-500 col-span-3 md:col-span-5 lg:col-span-8">
  <h1 class="tile-marker">ONE</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

图 5

我们可以将上述内容重构div为：

<div class="tile bg-teal-500 col-span-full">
  <h1 class="tile-marker">ONE</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

我们还可以使用col-start-{n}和col-end-{n}来实现这一点：

<div class="tile bg-teal-500 col-start-1 col-end-4 md:col-start-1 md:col-end-6 lg:col-start-1 lg:col-end-9">
  <h1 class="tile-marker">ONE</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

但是看看每个开始和结束断点处的双重响应类：

md:col-start-1 md:col-end-6 lg:col-start-1 lg:col-end-9
Enter fullscreen mode Exit fullscreen mode

它们不是很 DRY。col-span-{n}类更适合设置大小。

我们来设置一些尺寸。第二个和第三个的宽度div如下：

<div class="tile bg-amber-500 col-span-1 md:col-span-2 lg:col-span-3">
  <h1 class="tile-marker">TWO</h1>
</div>
<div class="tile bg-yellow-500 col-span-2 md:col-span-3 lg:col-span-5">
  <h1 class="tile-marker">THREE</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

放置

col-span-{n}div类为在网格容器内放置 s 提供了有限的自由，col-start-{n}而col-end-{n}当使用响应类时会导致大量重复。

我们可以将起始类和跨度类结合起来，以编写更简洁的代码。起始类可以用来放置元素div，而跨度类可以用来定义元素的宽度和高度。

让我们看一下第四个例子div：

<div class="tile bg-lime-600 lg:col-start-4 lg:col-span-2">
  <h1 class="tile-marker">FOUR</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

图片 6

我们可以看到，lg第四列div从第四列开始，向右跨越两列。

好的。

现在，如果我们仔细观察布局，就会发现一切都杂乱无章，而且它仍然不是一个布局良好、可用的网格——因为最后两个divs 似乎与其余部分隔离开来。这是因为我们只应用了公式的一半：只有网格的列类。另一半涉及网格的行类。

您的 CRUD 应用程序是否因技术债务而负担过重？

了解基于 React 的 Headless 解决方案，构建流畅的CRUD应用。Refine 让您可以确保代码库始终保持简洁，无样板代码。

尝试改进以快速构建您的下一个CRUD项目，无论它是管理面板、仪表板、内部工具还是店面。


完善博客徽标

网格行

如果我们想要更精细地控制 Grid，我们需要明确设置行数，就像设置列数一样。我们将通过引入 来实现这一点grid-rows-{n}。

对于我们的网格，我们需要 5 行。到目前为止，行数都是隐式定义的，但这次我们想显式定义它。因此，我们grid-rows-5在容器中添加：

<div class="container m-auto grid grid-cols-3 grid-rows-5 md:grid-cols-5 lg:grid-cols-8 gap-4">
Enter fullscreen mode Exit fullscreen mode

现在，我们可以继续div将最后一个设置为页脚。此页脚将放置在底行。在较小的屏幕上，它位于左侧，但跨越整个底行md：

<div class="tile bg-pink-500 row-start-5 md:col-span-full">
  <h1 class="tile-marker">NINE</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

这里，row-start-5指定页脚放置在最底行。如下所示：

图片 7

跨行

我们可以更进一步，让它更加结构化。让我们将第二个divspan 设置为网格的左侧——位于导航栏和页脚之间。我们可以选择第二行作为起点，div并以 5 为终点来实现：

<div class="tile bg-amber-500 row-start-2 row-end-5 col-span-1 md:col-span-2 lg:col-span-3">
  <h1 class="tile-marker">TWO</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

我们将其塑造成更好的网站布局：

图片 8

重新排序区域

n我们可以通过改变和row-start-{n}的值来更改区域的顺序col-start-{n}。第二个区域div可以是一个广告部分，我们希望它在小屏幕上显示在底部，在大屏幕上显示在顶部。让我们先在小屏幕上设置它的顺序，然后在 处更改它md：

<div class="tile bg-yellow-500 row-start-4 row-end-5 md:row-start-2 md:row-end-3 col-span-2 md:col-span-3 lg:col-span-5">
  <h1 class="tile-marker">THREE</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

我们有如下内容：

图片 9

最后的index.html效果如下：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/styles.css" rel="stylesheet">
  <title>Document</title>
  </head>
  <body>
    <div class="container m-auto grid grid-cols-3 grid-rows-5 md:grid-cols-5 lg:grid-cols-8 gap-4">
      <div class="tile bg-teal-500 col-span-full">
        <h1 class="tile-marker">ONE</h1>
      </div>
      <div class="tile bg-amber-500 row-start-2 row-end-5 col-span-1 md:col-span-2 lg:col-span-3">
        <h1 class="tile-marker">TWO</h1>
      </div>
      <div class="tile bg-yellow-500 row-start-4 row-end-5 md:row-start-2 md:row-end-3 col-span-2 md:col-span-3 lg:col-span-5">
        <h1 class="tile-marker">THREE</h1>
      </div>
      <div class="tile bg-lime-600 lg:col-start-4 lg:col-span-2">
        <h1 class="tile-marker">FOUR</h1>
      </div>
      <div class="tile bg-green-600">
        <h1 class="tile-marker">FIVE</h1>
      </div>
      <div class="tile bg-emerald-500">
        <h1 class="tile-marker">SIX</h1>
      </div>
      <div class="tile bg-teal-500">
        <h1 class="tile-marker">SEVEN</h1>
      </div>
      <div class="tile bg-purple-500">
        <h1 class="tile-marker">EIGHT</h1>
      </div>
      <div class="tile bg-pink-500 row-start-5 md:col-span-full">
        <h1 class="tile-marker">NINE</h1>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode


不和谐横幅

自定义 TailwindCSS 主题

如上所述，TailwindCSS Grid配置可以根据我们的需要进行更改。

假设出于某种原因，我们想要将 Tailwind 网格列的最大数量设置为 16。这意味着我们需要能够生成grid-cols-{n}从n0 到 16 的所有类。这也意味着我们需要生成所有col-start-{n}和col-end-{n}类。

我们可以通过扩展文件中的相关属性来生成这些类tailwind.config.js。就我们的目的而言gridTemplateColumns，gridColumnStart和gridColumnEnd属性如下：

// tailwin.config.js

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        // Simple 16 column grid
        '16': 'repeat(16, minmax(0, 1fr))',
      },
       gridColumnStart: {
        '13': '13',
        '14': '14',
        '15': '15',
        '16': '16',
        '17': '17',
      },
      gridColumnEnd: {
        '13': '13',
        '14': '14',
        '15': '15',
        '16': '16',
        '17': '17',
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

这将使所有相关的网格类可供我们使用。

结论

在本文中，我们使用Tailwind 的 CSS Grid类构建了一个简单的响应式布局。这些类允许我们明确设置列数和行数，并允许我们在更大的断点处重置它们，从而帮助我们实现响应式布局。

我们还可以使用Tailwind Grid轻松更改特定部分的大小和位置。在不同的断点处重新排序部分也是常见的做法。也许更方便的是，Tailwind 允许我们自定义生成类所需的许多属性，以便我们能够根据个人需求构建流畅且响应迅速的布局。

文章来源：https://dev.to/refine/tailwind-css-grid-system-56h9
Devto 翻译
PREV
你的 Python 代码太丑了。以下是如何修复它
NEXT
拥有大量前端开发资源的终极路线图💥💥您想要 PDF 格式的交互式路线图吗😎🙌？