Tailwind CSS - Grid Column Start/End
Tailwind CSS Grid Column Start/End是一个实用类，用于指定跨网格列的排列和大小。
Tailwind CSS 网格模板列类
以下是Tailwind CSS 网格模板列类的列表，这些类定义网格布局中列的排列和大小。
| 类 | CSS 属性 |
|---|---|
| col-auto | grid-column: auto; |
| col-span-1 | grid-column: span 1 / span 1; |
| col-span-2 | grid-column: span 2 / span 2; |
| col-span-3 | grid-column: span 3 / span 3; |
| col-span-4 | grid-column: span 4 / span 4; |
| col-span-5 | grid-column: span 5 / span 5; |
| col-span-6 | grid-column: span 6 / span 6; |
| col-span-7 | grid-column: span 7 / span 7; |
| col-span-8 | grid-column: span 8 / span 8; |
| col-span-9 | grid-column: span 9 / span 9; |
| col-span-10 | grid-column: span 10 / span 10; |
| col-span-11 | grid-column: span 11 / span 11; |
| col-span-12 | grid-column: span 12 / span 12; |
| col-span-full | grid-column: 1 / -1; |
| col-start-1 | grid-column-start: 1; |
| col-start-2 | grid-column-start: 2; |
| col-start-3 | grid-column-start: 3; |
| col-start-4 | grid-column-start: 4; |
| col-start-5 | grid-column-start: 5; |
| col-start-6 | grid-column-start: 6; |
| col-start-7 | grid-column-start: 7; |
| col-start-8 | grid-column-start: 8; |
| col-start-9 | grid-column-start: 9; |
| col-start-10 | grid-column-start: 10; |
| col-start-11 | grid-column-start: 11; |
| col-start-12 | grid-column-start: 12; |
| col-start-13 | grid-column-start: 13; |
| col-start-auto | grid-column-start: auto; |
| col-end-1 | grid-column-end: 1; |
| col-end-2 | grid-column-end: 2; |
| col-end-3 | grid-column-end: 3; |
| col-end-4 | grid-column-end: 4; |
| col-end-5 | grid-column-end: 5; |
| col-end-6 | grid-column-end: 6; |
| col-end-7 | grid-column-end: 7; |
| col-end-8 | grid-column-end: 8; |
| col-end-9 | grid-column-end: 9; |
| col-end-10 | grid-column-end: 10; |
| col-end-11 | grid-column-end: 11; |
| col-end-12 | grid-column-end: 12; |
| col-end-13 | grid-column-end: 13; |
| col-end-auto | grid-column-end: auto; |
Tailwind CSS 网格列起始和结束功能
- col-auto:此类取代了 CSS grid-column: auto; 属性。此类允许元素根据其内容自动跨越。
- col-span-*:此类用于指定网格布局中应跨越的列数。{*} 表示列数，范围从 1 到 12。
- col-start-*:此类用于指定元素在网格布局中列线上的起始位置。{*} 表示位置范围从 1 到 13。
- col-end-*:此类用于指定元素在网格布局中的结束位置。 {* 表示位置范围从 1 到 13。
Tailwind CSS 网格列起始和结束类示例
以下示例将说明 Tailwind CSS 网格列起始/结束类实用程序。
跨列扩展
col-span-* 实用程序指定元素如何在网格布局中跨列，如下所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Col Span Class Example
</h2>
<div class="grid grid-cols-4 gap-4">
<div class="bg-red-500 col-span-2 p-4">
Span 2 columns
</div>
<div class="bg-green-500 p-4">Column 1</div>
<div class="bg-green-400 p-4">Column 2</div>
<div class="bg-green-300 p-4">Column 3</div>
<div class="bg-green-200 p-4">Column 4</div>
<div class="bg-green-100 p-4">Column 5</div>
<div class="bg-green-500 p-4">Column 6</div>
</div>
</body>
</html>
将元素与列起始对齐
col-start-* 实用程序可有效定位网格项，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Col Start Class Example
</h2>
<div class="grid grid-cols-4 gap-4">
<div class="bg-red-500 col-start-2 p-4">
Col start 2
</div>
<div class="bg-green-500 p-4">Column 1</div>
<div class="bg-green-400 p-4">Column 2</div>
<div class="bg-green-300 p-4">Column 3</div>
<div class="bg-green-200 p-4">Column 4</div>
<div class="bg-green-100 p-4">Column 5</div>
<div class="bg-green-500 p-4">Column 6</div>
</div>
</body>
</html>
将元素与列尾对齐
col-end-* 实用程序可以有效地定位网格项，如下例所示。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Col End Class Example
</h2>
<div class="grid grid-cols-4 gap-4">
<div class="bg-red-500 col-start-2 col-end-4 p-4">End at column 4</div>
<div class="bg-green-500 p-4">Column 1</div>
<div class="bg-green-400 p-4">Column 2</div>
<div class="bg-green-300 p-4">Column 3</div>
<div class="bg-green-200 p-4">Column 4</div>
</div>
</body>
</html>
