Html 为什么我的网格单元不占用分配的fr单元？

在我的项目中，我注意到有时网格单元的高度尺寸彼此不相等，即使我使用相等的

fr

单位（例如

1fr

）指定了网格单元尺寸。我无法重现这个问题。但是我知道当我在

网格容器

的后代中将

字体大小

设置得非常高时，就会发生这种情况

有哪些常见实例会导致网格单元格高度不相同，即使指定的单元格行高度相同（例如

网格模板行：1fr 1fr

）？也许到那时我就能看到是什么导致了我的项目发生这种情况

---

下面的代码片段与我的项目中的代码片段非常接近。目前，我无法重新创建问题

.grid容器{
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（2，1fr）；
宽度：200px；
高度：200px；
背景图像：线性渐变（橙色、蓝色）；
}

1.
2.
3.
4.

在这种情况下，所有网格单元都在做它们应该做的事情。由于您已经设置了

.grid container

元素的宽度和高度，因此框会占用可用空间。如果无法重新创建问题，则网格单元内部可能存在一些自定义的高度或宽度元素，这些元素会影响某些网格单元的大小

如果你想看到一个良好的视觉效果，我推荐你的浏览器的开发工具（aka.Inspect元素），因为它们告诉你网格是如何间隔内部元素的。您可以做的另一件事是在网格单元上放置边框，以查看它们是否等边

.grid容器{
显示：网格；
间隙：10px；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr；
}
.网格容器分区{
边框：2件纯黑；
}

网格单元1
网格单元2
网格单元3
网格单元4

案例1:

关于您的陈述当指定相等的fr单位时，是什么导致行单元格彼此高度不同，例如网格模板行：1fr 1fr：我想告诉您这一点

grid-template-rows:1fr 1fr;

与行单元格无关。这只决定了我们灵活的

行高

。CSS网格中的

单元格

或

行单元格

或

网格项

是长方体，由这些属性

网格模板列

和

网格模板行

创建

在开发者窗口中，我们有一个很酷的功能，可以看到这些 但是，一旦我们使用CSS网格属性在DOM元素上创建了单元格

当我们做

网格模板行时：1fr 1fr 1fr。如果没有指定容器的高度，我们无法从一开始就知道一行有多少高度。每行的高度取决于放置在其中任何一行中的内容。即使只有一行或两行内容，所有行的行高也将保持不变。我的意思是空间会被占用

For Columns we don't have such problem, as column is calculated with respect to window viewport width

这就是你在项目中发生的事情

这幅图更能说明问题

所有行将根据任何行的高度增减

然而，在CSS网格中，我们在大多数情况下仅处理列，并且在大多数情况下使用
网格自动行
属性

案例2:假设我们显式地将高度和宽度设置为网格容器。
.网格容器{
高度：400px；
宽度：500px；
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr；
差距：1勒姆；
}

甚至认为我们可能已经为
网格模板行设置了相等的分数值。每行的高度将根据其内部内容而定。因此，行将相应地调整其内容<代码>因为分数（1fr）用于每行。所有的内容都应该放在里面，任何东西都不应该隐藏。在此过程中，行的宽度会发生变化，而不管是否设置为相等。

如果无法重新创建问题，则网格单元内部可能存在一些自定义的高度或宽度元素，这些元素会影响某些网格单元的大小调整
——这是我想了解的更多信息。你能给我一些例子或规则吗？我在最初的回复中添加了一个代码片段，希望能有所帮助！谢谢在我的项目中，当您检查网格容器时，虚线（我相信，它是用来反映“网格单元”）是不同的维度。这可能与您的代码片段不同（在您的示例中，虚线的维度都相同）？如果是这样的话，你能想象一下这样的场景吗？网格单元变为不同的维度，尽管每个单元都具有相同的指定维度，例如
1fr
？你说得对，我的代码片段的网格单元确实保持等边，尽管它们看起来不是这样。CSS网格意味着在所有网格单元中具有恒定的宽度和高度，除非另有规定。我想不出会出现这种情况。对不起，我帮不上忙了，亲爱的。我有个问题要问你。写入网格模板行时：1fr 1fr 1fr；您希望一行的高度是多少？目前，我无法重新创建问题-->因此在此之前，您的问题与此无关。试着重新创建问题，否则它就会被关闭。我说的代码片段接近我的项目，它指定了
height
。但更重要的是，这并不能回答我的问题。我是否知道单元格的确切高度无关紧要，因为我的问题是，当指定了相等的
fr
单位时，是什么导致行单元格的高度彼此不同。已使用案例2…更新。原因是fr单元本身匹配：）分数意味着灵活的行，我们的内容应该都是h