Tailwind CSS - 网格自动列
Tailwind CSS grid-auto-columns 网格自动列 是一个实用程序类，用于指定隐式创建的网格列的大小。
Tailwind CSS grid-auto-columns 网格自动列类
以下是用于设置隐式创建的网格列大小的 Tailwind CSS 网格自动列 类列表。
| 类 | CSS 属性 |
|---|---|
| auto-cols-auto | grid-auto-columns: auto; |
| auto-cols-min | grid-auto-columns: min-content; |
| auto-cols-max | grid-auto-columns: max-content; |
| auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
Tailwind CSS 网格自动列类的功能
- auto-cols-auto:将网格列的宽度设置为其内容的宽度。
- auto-cols-min: 将网格列的宽度设置为容纳其内容所需的最小宽度。
- auto-cols-max: 将网格列的宽度设置为容纳其内容所需的最大宽度。
- auto-cols-fr 根据可用空间的相等比例设置列宽。
Tailwind CSS 网格自动列类示例
以下示例将说明 Tailwind CSS 网格自动列类实用程序。
调整自动创建的网格列的大小
auto-cols-auto 实用程序用于自动调整明确创建的网格列的大小，如下例所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Auto Cols Auto Class
</h2>
<div class="grid grid-flow-col auto-cols-auto gap-4 p-4">
<div class="bg-green-300 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2 with more content</div>
<div class="bg-green-300 p-4">Item 3</div>
</div>
</body>
</html>
最小化自动创建的网格列
auto-cols-min 实用程序用于自动调整明确创建的网格列的大小，如下例所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Auto Cols min Class
</h2>
<!--The auto-cols-min class minimizes the width of
automatically created grid columns to fit their content.-->
<div class="grid grid-flow-col auto-cols-min gap-4 p-4">
<div class="bg-green-300 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2 with more content</div>
<div class="bg-green-300 p-4">Item 3</div>
</div>
</body>
</html>
最大化自动创建的网格列
auto-cols-max 实用程序用于自动调整明确创建的网格列的大小，如下例所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Auto Cols max Class
</h2>
<!--The auto-cols-max class maximize the width of
automatically created grid columns to fit their content.-->
<div class="grid grid-flow-col auto-cols-max gap-4 p-4">
<div class="bg-green-300 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2 with more content</div>
<div class="bg-green-300 p-4">Item 3</div>
</div>
</body>
</html>
对自动创建的网格列进行拆分
auto-cols-fr 实用程序用于自动调整明确创建的网格列的大小，如下例所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Grid Auto Cols Fr Class
</h2>
<!--The auto-cols-fr class equally fraction the
available space between grid columns-->
<div class="grid grid-flow-col auto-cols-fr gap-4 p-4">
<div class="bg-green-300 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2 with more content</div>
<div class="bg-green-300 p-4">Item 3</div>
</div>
</body>
</html>
