Tailwind CSS - 网格自动列

Tailwind CSS: grid-auto-columns

Grid Auto Columns 工具类控制隐式创建的网格列的大小。隐式列是指您在网格布局中未明确定义的列，当您向网格添加的项多于已定义列数时，通常会发生这种情况。

何时使用此功能？

想象您正在使用 grid-flow-col。这告诉您的网格以列的形式排列项目，并根据需要创建新列。但这些自动生成的列应该有多宽呢？grid-auto-columns 给出了答案。它为所有未明确指定大小的列设置了一个默认宽度。

grid-auto-columns 类

Tailwind 提供了四个主要工具类来控制这些隐式列的大小：

类名	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);	列占据网格容器中可用自由空间的一部分。

实战示例

在以下示例中，我们使用 grid grid-flow-col 来创建基于列的布局。列数由子 div 元素的数量决定。auto-cols-* 工具类定义了这些列的宽度。

示例：auto-cols-auto

使用 auto-cols-auto，每列的宽度由其内部内容决定。内容越多的列会越宽。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-cols-auto</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-xl font-bold mb-4">auto-cols-auto</h2>
  <div class="grid grid-flow-col auto-cols-auto gap-4 p-4 bg-gray-200 rounded-lg">
    <div class="bg-teal-300 p-4 rounded">Item 1</div>
    <div class="bg-teal-400 p-4 rounded">Item 2 with more content</div>
    <div class="bg-teal-500 p-4 rounded">Item 3</div>
  </div>
</body>
</html>

示例：auto-cols-min

auto-cols-min 强制列尽可能窄。请注意第二个项目的文本如何大量换行以最小化列宽。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-cols-min</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-xl font-bold mb-4">auto-cols-min</h2>
  <div class="grid grid-flow-col auto-cols-min gap-4 p-4 bg-gray-200 rounded-lg">
    <div class="bg-sky-300 p-4 rounded">Item 1</div>
    <div class="bg-sky-400 p-4 rounded">Item 2 with more content</div>
    <div class="bg-sky-500 p-4 rounded">Item 3</div>
  </div>
</body>
</html>

示例：auto-cols-max

auto-cols-max 与 auto-cols-min 相反。它使列变得尽可能宽，以使其内容在一行中显示，从而防止文本换行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-cols-max</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-xl font-bold mb-4">auto-cols-max</h2>
  <div class="grid grid-flow-col auto-cols-max gap-4 p-4 bg-gray-200 rounded-lg">
    <div class="bg-indigo-300 p-4 rounded">Item 1</div>
    <div class="bg-indigo-400 p-4 rounded">Item 2 with more content</div>
    <div class="bg-indigo-500 p-4 rounded">Item 3</div>
  </div>
</body>
</html>

示例：auto-cols-fr

auto-cols-fr 将可用容器空间平均分配给所有隐式列。这对于创建灵活、间距均匀的布局非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>auto-cols-fr</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-xl font-bold mb-4">auto-cols-fr</h2>
  <div class="grid grid-flow-col auto-cols-fr gap-4 p-4 bg-gray-200 rounded-lg">
    <div class="bg-purple-300 p-4 rounded">Item 1</div>
    <div class="bg-purple-400 p-4 rounded">Item 2 with more content</div>
    <div class="bg-purple-500 p-4 rounded">Item 3</div>
  </div>
</body>
</html>