CSS网格：fr和百分比单位差异

我在看这个问题：并且理解

fr

在容器中的空闲空间中起作用。我试着检查它，这会引起混乱

在这种情况下，

%

和

fr

的作用完全相同

在如下代码中：

main {
    width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    // grid-template-columns: repeat(3, 33%);
}

我的印象是：

如果您尝试

33%

则无论每个网格项的内容长度如何，容器都将分成3个相等的部分（按预期工作）

如果尝试

1fr

，则每个网格项将获得与容器宽度中的内容长度后可用的可用空间部分完全相同的部分。也就是说，中间将获得更多的空间，因为它将从左侧和右侧部分获得部分

但在每种情况下，我得到的宽度都是一样的。为什么?

---

两者相同的原因是，您没有为任何列使用任何静态值，并且只使用百分比和fr。如果使用宽度为100px的列，结果将不同，因为33%将保持33%，但1fr将用完所有可用空间（在本例中为66%-100px）

main{
宽度：900px；
显示：网格；
网格模板柱：1fr 33%100px；
//网格模板列：重复（3,33%）；
}
//娱乐风格
// -------------------------------------------------
@导入url（'https://fonts.googleapis.com/css?family=Scope+一个|开放+Sans:700’；
身体{
背景：#fff；
颜色：rgb（113、115、136）；
字体系列：“范围一”，无衬线；
字号：1rem；
线高：1；
保证金：1rem；
}
主要{
背景：#444；
边框：3px实心#444；
网格间距：3倍；
}
div{
背景：#fff；
填料：1.5vw 2vw；
}
h1，
氢{
保证金：0；
}
h1{
颜色：rgb（113、115、136）；
字体大小：1.5rem；
字号：700；
填料顶部：.5rem；
}

1fr（更长，宽度为66%-200px）
33%（较短，宽度为33%）
100px

您的问题的答案实际上在您引用的帖子中提供。添加类似于

网格列间距：25px

的内容，以查看笔中两者之间的差异。百分比版本将导致溢出；

fr

版本不会。Jen Simmons的fr单元视频回答了您的问题