tailwind `grid-cols-[1fr,700px,2fr]` 中的参数有什么作用？
我\xe2\x80\x99m 试图更好地理解顺风网格 - 有人可以帮助我理解每个参数1fr和中的700px作用2fr
\n<!-- Complex grids -->\n<div class="grid-cols-[1fr,700px,2fr]">\n <!-- ... -->\n</div>\n\n要理解这一点，首先您需要了解 CSS 中的网格列。
\n您编写的代码将转换为grid-template-columns: 1fr 700px 2fr;纯 CSS。
该grid-template-columns属性指定网格布局中的列数（和宽度）。
CSS 语法grid-template-columns是这样的：
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;\n您可以在此处阅读有关grid-template-columns参数和顺序的更多信息：
- \n
- https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns \n
- https://www.w3schools.com/cssref/pr_grid-template-columns.asp \n
但简而言之，第一个参数1fr表示 1 个小数单位。
根据定义，Fr 单位是小数单位，1fr代表可用空间的 1 部分。\n同样适用于2fr。\n700px仅表示 700 像素。
这进一步意味着上面的代码会生成 3 列网格容器，每列的大小为1fr, 700px& 2fr。
Tailwind 是如何做到这一点的，您可以在这里阅读：
\n- \n
- https://tailwindcss.com/docs/grid-template-columns#任意-values \n
- https://tailwindcss.com/docs/adding-custom-styles#using-任意-values \n
简而言之，Tailwind 使用任意值来允许您指定一些在主题中包含的内容没有意义的内容，因此您可以使用方括号使用任意值动态生成属性。
\n你的代码的结果是这样的：
\n
你可以玩这个：
\n\r\n
\r\n\n
\r\n
\r\n.grid-container {\n display: grid;\n grid-template-columns: 1fr 700px 2fr;\n grid-gap: 10px;\n background-color: #2196F3;\n padding: 10px;\n}\n\n.grid-container>div {\n background-color: rgba(255, 255, 255, 0.8);\n text-align: center;\n padding: 20px 0;\n font-size: 30px;\n}<!DOCTYPE html>\n<html>\n\n<head></head>\n\n<body>\n\n <div class="grid-container">\n <div class="item1">1fr</div>\n <div class="item2">700px</div>\n <div class="item3">2fr</div>\n <div class="item1">1fr</div>\n <div class="item2">700px</div>\n <div class="item3">2fr</div>\n <div class="item1">1fr</div>\n <div class="item2">700px</div>\n <div class="item3">2fr</div>\n </div>\n\n</body>\n\n</html>| 归档时间： |
|
| 查看次数： |
4699 次 |
| 最近记录： |