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

问题描述 投票：0回答：2
tailwind-css
2个回答
8
投票

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

您编写的代码在纯 CSS 中会转换为 

grid-template-columns: 1fr 700px 2fr;
。

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

grid-template-columns

的CSS语法是这样的：

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit; 
您可以在此处阅读有关 
grid-template-columns
 和参数顺序的更多信息：




  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

  • https://www.w3schools.com/cssref/pr_grid-template-columns.asp

    • 

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


根据定义，Fr 单位是分数单位，
1fr
 表示可用空间的 1 部分。

2fr
也是如此。

700px
 只表示 700 像素。


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


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




  • https://tailwindcss.com/docs/grid-template-columns#任意-values

  • https://tailwindcss.com/docs/adding-custom-styles#using-任意-values

    • 

简而言之，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>





    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
新的tailwind 3.4.3官方文档中有一个与该问题标题相关的更新。

不要使用逗号分隔的列宽：


grid-cols-[1fr,700px,2fr]

他们采用了下划线语法，如下所示：

grid-cols-[1fr_700px_2fr]

我相信是因为旧语法很容易出错。例如，如果我们在逗号后面错误地使用了空格，例如：


 grid-cols-[1fr, 700px, 2fr]

未应用 grid-template-columns 属性。

    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.