Tailwind CSS - 网格模板列

上一页
下一页

Tailwind CSS 网格模板列是一个实用程序类，用于指定网格布局中列的数量和大小。

Tailwind CSS 网格模板列类

以下是定义网格布局中列的Tailwind CSS 网格模板列类的列表。

类名 CSS 属性
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none grid-template-columns: none;
grid-cols-subgrid grid-template-columns: subgrid;

Tailwind CSS 网格模板列的功能

  • grid-cols-*：此类用于创建具有 n 个大小相等的列的网格布局。*在这里代表列的数量范围为1 到 12。
  • grid-cols-none：此类替换 CSS grid-template-columns: none; 属性。此类用于禁用网格布局的列实用程序。
  • grid-cols-subgrid：此类替换 CSS grid-template-columns: subgrid; 属性。此类允许网格项从其父网格继承网格列轨道。

Tailwind CSS 网格模板列类示例

以下示例将说明 Tailwind CSS 网格模板列类实用程序。

在网格中指定列

下面的示例说明了grid-cols-* 的用法，在这里您可以从上表中定义一个有效数字来指定要放置的列数。在此示例中，我们将创建 4 列。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-lime-500 p-4">1</div>
        <div class="bg-violet-500 p-4">2</div>
        <div class="bg-green-500 p-4">3</div>
        <div class="bg-pink-500 p-4">4</div>
        <div class="bg-lime-300 p-4">5</div>
        <div class="bg-violet-300 p-4">6</div>
        <div class="bg-green-300 p-4">7</div>
        <div class="bg-pink-300 p-4">8</div>
    </div>
</body>

</html>

禁用列实用程序

下面的示例演示了 **grid-cols-none** 类的用法，它将禁用网格列。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Col None
    </h2>
    <div class="grid grid-cols-none gap-4">
        <div class="bg-lime-500 p-4">1</div>
        <div class="bg-violet-500 p-4">2</div>
        <div class="bg-green-500 p-4">3</div>
        <div class="bg-pink-500 p-4">4</div>
        <div class="bg-lime-300 p-4">5</div>
        <div class="bg-violet-300 p-4">6</div>
        <div class="bg-green-300 p-4">7</div>
        <div class="bg-pink-300 p-4">8</div>
    </div>
</body>

</html>

采用列轨道

要采用列轨道，可以使用 **grid-cols-subgrid** 类。在下面的示例中，我们使用了 grid-cols-subgrid 类来实现。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Col Subgrid
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-green-500 p-4">01</div>
        <div class="bg-green-500 p-4">02</div>
        <div class="bg-green-500 p-4">03</div>
        <div class="bg-green-500 p-4">04</div>
        <div class="bg-green-500 p-4">05</div>
        <div class="grid grid-cols-subgrid gap-4 col-span-3">
            <div class="col-start-2 bg-green-300 p-4">06</div>
        </div>
    </div>
</body>

</html>
打印页面
上一页
下一页
广告