Tailwind CSS - 列
Tailwind CSS Column 实用程序控制元素内的列数。将 Column 实用程序添加到元素后，无需编写自定义 CSS 代码来生成列。
Tailwind CSS columns 列类会自动调整宽度以适应指定的列数。我们甚至可以通过选择理想的宽度来调整宽度。
语法
<element class="columns-*"></element>
Tailwind CSS 列类
以下提到的类可用于控制列布局。
| 类 | CSS 属性 |
|---|---|
| columns-* | columns: *; |
| columns-auto | columns: auto; |
| columns-{3xs-xs} | columns: {16-20rem}; |
| columns-sm | columns: 24rem;; |
| columns-md | columns: 28rem; |
| columns-lg | columns: 32rem; |
| columns-{xl-7xl} | columns: {36rem-80rem}; |
Tailwind CSS Columns 类的功能
- columns-*:Tailwind CSS Columns-{*} 类表示元素内的列数。其范围从1 到 12。
- columns-{3xs-xs}:Tailwind CSS Columns-{3xs-xs} 类表示超小列，其范围从 3xs 到 xs，宽度范围从16 到 18rem。
- Columns-{xl-7xl}:Tailwind CSS Columns-{xl-7xl} 类表示超大列，尺寸范围从 xl 到 7xl，宽度范围从 36 到 80 rem。
Tailwind CSS Columns 示例
以下示例将说明 Tailwind CSS Columns 类。
基于列数添加
以下示例说明了如何使用 Tailwind CSS Columns-* 类，该类的列数为 3，这将在元素内创建三列。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="text-3xl font-bold">
Tailwind CSS Columns Class
</p>
<p>Tailwind CSS Columns-* Class</p>
<div class="columns-3 gap-6 space-y-4">
<img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
<img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
<img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
<img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
<img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
<img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
</div>
</body>
</html>
基于宽度的 Tailwind CSS Columns 类
以下示例说明了 Tailwind CSS Columns-3xs 类的用法，该类将根据屏幕尺寸对齐元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="text-3xl font-bold">
Tailwind CSS Columns Class
</p>
<p>Tailwind CSS Columns-* Class</p>
<div class="columns-3xs space-y-4">
<img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
<img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
<img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
<img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
<img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
<img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
</div>
</body>
</html>
