Tailwind CSS - 网格模板列
Tailwind CSS grid-template-columns 网格模板列是一个实用程序类，用于指定网格布局中列的数量和大小。
Tailwind CSS grid-template-columns 网格模板列类
以下是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>
