在靠近用户的地方部署容器

本工程教育（EngEd）计划由科支持。

在全球范围内即时部署容器。Section是经济实惠、简单而强大的。

免费开始吧。

使用Tailwind CSS网格类

11月12日, 2021

主题。
语言

CSS网格是网页设计中使用的一种布局系统，使用行和列来布局网页的UI元素。我们可以用Tailwind CSS轻松做到这一点。Tailwind CSS增加了一套全面的工具，用于处理CSS网格布局

在本教程中，我们将学习如何使用Tailwind CSS中的网格类，在我们的网页中轻松布局元素。我们还将学习如何使用这些类为我们的元素做响应式设计。

让我们来看看它们是如何工作的。

前提条件

为了跟上本教程，对HTML和Tailwind CSS有一个清晰的了解是必不可少的。

在本教程中，我们将不涉及Tailwind CSS的基础知识，但你可以访问这篇文章了解安装过程。

让我们开始吧!

概述

在本教程中，我们将完成以下工作。

将项目与Tailwind连接起来
设置HTML
网格行和列的类和响应性
网格行和列的跨度类
网格间隙类和响应性

链接我们的Tailwind样式表

我们将使用<link> 标签将我们的Tailwind样式表链接到我们的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">
    <title>Document</title>
    <link rel="stylesheet" href="./src/tailwind.css">
</head>
</html>

我们的HTML

首先，我们将使用<body> 标签内的类来设计正文的样式。你可以选择任何其他对你有吸引力的颜色。<div> 然后，我们将使用类min-h-screen ，设置我们的容器的高度，这意味着容器的最小高度等于视口的100。

然后，我们将在第一个容器内创建另一个容器。这个容器将包含我们将在行和列中铺设的元素。

<body class="bg-green-400">
    <div class="min-h-screen flex items-center justify-center">
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-5">
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">1</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">2</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">3</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">4</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">5</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">6</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">7</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">8</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">9</div>
            <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">10</div>
        </div>
    </div>
</body>

以下是我们所使用的其他类。

flex 将元素并排排列
items-center 和，使元素出现在屏幕的中心。justify-center
rounded-lg 使元素的边缘有一个圆形的外观。
bg-green-100 类为元素提供了绿色的背景颜色。

现在我们已经完全设置了我们的HTML，并添加了Tailwind类。这就是它看起来的样子。

Small Screen

Medium Screen

Large Screen

如上所示，元素的布局根据视口的屏幕大小而改变。这就是所谓的响应性。

网格行和列以及响应性

为了能够使用网格类，我们需要先给<div> 容器，如上面的代码所示，grid 类。这个网格类控制这个元素的显示类型。

在Tailwind CSS中，响应性是通过使用这些{screen:} 前缀来实现的：sm: 用于小屏幕尺寸，md: 用于中等屏幕尺寸，lg: 用于大屏幕尺寸。

我们所使用的grid-col-2 工具将元素设定为两列。这在所有的屏幕尺寸上都生效。要改变这一点只对小屏幕设备生效，我们在类之前使用前缀，sm: 。行会被自动设置为与列的数量相匹配。我们也可以使用sm:grid-rows-5 ，以达到与本例相同的结果，即我们有十个元素。

md:grid-cols-3 工具通过在网格类之前使用md: ，在中等屏幕设备上将元素设置为三列，这意味着中等屏幕。这个类将元素设置为三列四行。

lg:grid-cols-4 工具只在大屏幕设备中通过在网格类之前使用lg: ，将元素设置为四列。该类将元素设置为三行四列。

网格行跨度和列跨度类

在Tailwind中，col-span 类被用来指定一个单元格应该占据的列数。row-span-{n} 类被用来指定一个单元格应该占据的行数。我们通过在类的前面添加一个数字来设置一个单元格应该跨越的行数或列数。

例如，如果我们想让一个单元格跨越两行，那么我们使用row-span-2 ，如果我们想让一个列跨越两行，那么我们使用col-span-2 ，如下图所示。

<div class="grid grid-cols-3 gap-4 p-5">
    <div class="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-2">1</div>
    <div class="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">2</div>
    <div class="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-2">3</div>
    <div class="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">4</div>
    <div class="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg col-span-3">5</div>
</div>

Row and Column Span

网格间隙类

间隙类是用来在行和列之间添加空间的。间隙类包括。gap-{size},gap-x-{size} 和gap-y-{size} 。对于我们的案例，我们使用了gap-4 。这个类在行和列之间均匀地添加空间。为了使用不同的行间距和列间距，我们使用gap-x-{size} ，用于列间距，gap-y-{size} ，用于行间距。

它是如何被使用的。

<div class="grid grid-cols-2 gap-x-5 gap-y-3">
  <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-14 rounded-lg">1</div>
  <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-14 rounded-lg">2</div>
  <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-14 rounded-lg">3</div>
  <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-14 rounded-lg">4</div>
</div>

间隙响应性

我们可以在Tailwind中控制特定屏幕尺寸下的间隙，方法是为任何现有的间隙类添加一个{screen}: 前缀。例如，使用md:gap-4 来应用16px的间隙，也就是说，gap-4 类只在中等屏幕尺寸下应用，lg:gap-6 只在大屏幕尺寸下应用，如下图所示。

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4 lg:gap-6 p-5">
    <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-14 rounded-lg">1</div>
    <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-14 rounded-lg">2</div>
    <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-14 rounded-lg">3</div>
    <div class="bg-green-100 text-green-500 text-lg font-bold text-center p-14 rounded-lg">4</div>
</div>