fr单位配合grid布局 - 翁先森的博客

在网格布局中的运用

网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。 fr是一个相对尺寸单位，表示剩余空间做等分，此项分配到的百分比(如果只有一个项使用此单位，那就占剩余空间的100%，所以多个项联合使用更有意义)

弹性尺寸使用fr尺寸单位，其来自 “fraction” 或 “fractional unit” 单词的前两个字母，表示整体空间的一部分。

结合grid布局可以实现等分行列的烦恼

示例#

代码如下

1
<style>
2
  .grid {
3
    display: grid;
4
    grid-template-columns: repeat(3, 1fr);
5
    gap: 10px 20px;
6
    width: 500px;
7
    padding: 10px;
8
    background: bisque;
9
  }
10
  .grid-item {
11
    background-color: aquamarine;
12
  }
13
</style>
14
<div class="grid">
15
  <div class="grid-item">
16
    <p>12121</p>
17
  </div>
18
  <div class="grid-item">
19
    <p>12121</p>
20
  </div>
21
  <div class="grid-item">
22
    <p>12121</p>
23
  </div>
24
</div>

坑#

如果内部的元素内容很多就会容易造成不等分的情况

如图

解决方案

1
grid-template-columns: repeat(3, minmax(10px,1fr));

给了10px的最小宽度值。解决了最小宽度不确定导致的溢出问题、同时10px最小宽度比起0px避免了元素直接消失，当问题出现时可减小调试成本。