tailwind `grid-cols-[1fr,700px,2fr]` 中的参数有什么作用？

Question

我正在尝试更好地理解顺风网格 - 谁能帮助我理解每个参数 1fr、700px 和 2fr 在

中的作用


<!-- Complex grids -->
<div class="grid-cols-[1fr,700px,2fr]">
  <!-- ... -->
</div>

Answer 1

要理解这一点，首先您需要了解 CSS 中的一般网格列。

您编写的代码在纯 CSS.

中转换为 grid-template-columns: 1fr 700px 2fr;

grid-template-columns 属性指定网格布局中的列数（和宽度）。

CSS grid-template-columns 的语法是这样的：

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

您可以在这里阅读更多关于 grid-template-columns 和参数顺序的信息：

但简而言之，第一个参数1fr表示1个小数单位。

根据定义，Fr 单位是小数单位，1fr 是可用的 1 部分 space。 2fr 也是如此。 700px就是700像素。

这进一步意味着上面的代码生成了 3 列网格容器，每列的大小为 1fr、700px 和 2fr。

tailwind 是如何做到这一点的，您可以在这里阅读：

简而言之，tailwind 使用任意值允许您指定一些没有意义的内容包含在您的主题中，因此您可以使用方括号使用任意值即时生成属性 .

你的代码的结果是这样的：

你可以玩这个：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 700px 2fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<!DOCTYPE html>
<html>

<head></head>

<body>

  <div class="grid-container">
    <div class="item1">1fr</div>
    <div class="item2">700px</div>
    <div class="item3">2fr</div>
    <div class="item1">1fr</div>
    <div class="item2">700px</div>
    <div class="item3">2fr</div>
    <div class="item1">1fr</div>
    <div class="item2">700px</div>
    <div class="item3">2fr</div>
  </div>

</body>

</html>

tailwind `grid-cols-[1fr,700px,2fr]` 中的参数有什么作用？

What do the parameters in tailwind `grid-cols-[1fr,700px,2fr]` do?

tailwind-css