为什么grid-gap会导致溢出?

文章2023-01-105 人已阅来源:网络

您有一个3列网格容器(.body):

grid-template-columns: 25% 50% 25%

这些列的总宽度为100%。

然后在列(和行)之间添加沟槽:

grid-gap: 10px

即:

grid-column-gap: 10px;
grid-row-gap: 10px;

所以当你把所有的宽度加起来时:

25% + 50% + 25% + 10px + 10px

简单地说:

100% + 20px > 100%, 这会导致溢出情况

(注意:grid-*-gap属性仅应用于网格项之间-绝不应用于项与容器之间。这就是为什么我们计算两个网格间隙,而不是四个。)

作为一种解决方案,可以尝试使用fr单位,而不是百分比单位,它只适用于可用空间。这意味着fr长度是在应用任何grid-gap长度之后计算的。

grid-template-columns: 1fr 2fr 1fr