CSS 网格布局：Fr 单位

CSS Grid Layout模块用于创建基于网格的布局系统，借助行和列，可以更轻松地设计任何网页，而无需使用浮动和定位。

句法：

.class {
    display:grid;
}

注意：如果该元素设置 display:grid，则 HTML 元素将成为网格

• grid-template-columns ：这指定列的大小
• grid-template-rows ：指定行的大小。
• grid-gap ：设置行和列之间的间隙。

一些 grid-template-columns 关键字值：

• 网格模板列：重复([ <正整数> | 自动填充 | 自动适应], )；
• 网格模板行：重复([ <正整数> | 自动填充 | 自动适应], )；

表示曲目列表的重复片段，允许大量列显示重复出现
以更紧凑的形式编写模式。它允许您定义重复 X 次的模式。

• 网格模板列：自动；
• 网格模板行：自动；

表示自动放置、自动跨度或一列的默认跨度适合列中的内容。该行适合该行中的内容。

• 网格模板列： minmax(min, max);
• 网格模板行：最小最大(最小，最大)；

是定义大小范围大于或等于 min 且小于或等于 max 的功能符号

CSS Grid Layout 模块引入了一个新的灵活的长度单位，称为 fr。

• Fr 单位： Fr 是一个小数单位。
• Fr 单位是在调整网格内的间隙时自动计算布局划分的输入。

示例 1.本示例说明了 fr 单位的使用。

  

    

  

    
GeeksforGeeks
    

        
geeksforgeeks 1
        
geeksforgeeks 2
        
geeksforgeeks 3
        
geeksforgeeks 4
    

  
  

我们有 4 列，每列占用相同的空间。每个宽度为 1fr。每列都是相等的。 1fr=可用空间的25%。

例2 。此示例说明了如何使用具有不同小数值的 fr 单位。

  

  

  

  
GeeksforGeeks
  

    
geeksforgeeks 1
    
geeksforgeeks 2
    
geeksforgeeks 3
    
geeksforgeeks 4
    
geeksforgeeks 5
    
geeksforgeeks 6
    
geeksforgeeks 7
    
geeksforgeeks 8
    
geeksforgeeks 9
    
geeksforgeeks 10
    
geeksforgeeks 11
    
geeksforgeeks 12
    
geeksforgeeks 13
    
geeksforgeeks 14
    
geeksforgeeks 15
    
geeksforgeeks 16
  

  
  

我们有 4 列，前两列占用相同数量的空间，即 1fr，后两列占用相同数量的空间，即 2fr。

示例 2。此示例说明了 fr 单元与 repeat() 和自动表示法的使用。

  

  

  

  
GeeksforGeeks
  

    
geeksforgeeks 1
    
geeksforgeeks 2
    
geeksforgeeks 3
    
geeksforgeeks 4
    
geeksforgeeks 5
    
geeksforgeeks 6
    
geeksforgeeks 7
    
geeksforgeeks 8
    
geeksforgeeks 9
    
geeksforgeeks 10
    
geeksforgeeks 11
    
geeksforgeeks 12
    
geeksforgeeks 13
    
geeksforgeeks 14
    
geeksforgeeks 15
    
geeksforgeeks 16
  

  
  

重复(列/行数，我们想要的列宽)；

输出 3