CSS 网格布局中列宽的'fr”和百分比单位之间的主要区别是什么？

CSS 网格布局中百分比和 fr 单位的区别

使用 CSS 网格布局时，了解百分比和 fr 单位在定义宽度时的区别非常重要列。

fr单位

fr 单位代表“小数单位”，它仅适用于容器中的可用空间。当使用 fr 单位时，浏览器在考虑网格间隙后，根据剩余空间计算每列的宽度。

例如，在下面的代码中，网格容器被分为 12 列，每列在容器内占用相等的可用空间：

grid-template-columns: repeat(12, 1fr);

百分比另一方面，单位

百分比单位将每列的宽度定义为容器总宽度的百分比。这意味着每列的宽度是根据容器的实际宽度计算的。

例如，在下面的代码中，每列的宽度为 8.33333%，即 100% 除以 12：

grid-template-columns: repeat(12, calc(100% / 12));

为什么百分比会导致列溢出

fr 和百分比单位之间的主要区别在于它们如何处理网格间隙。对于 fr 单位，在计算列宽之前，会从容器的可用空间中减去网格间隙。这可以确保列不会溢出容器的宽度。

但是，使用百分比单位时，网格间隙会添加到列宽度中。这意味着即使列的总宽度可能等于 100%，添加网格间隙也会导致列溢出容器的宽度。

要解决此问题，您可以使用 fr 单位或调整百分比计算以考虑网格间隙。

以上是CSS 网格布局中列宽的'fr”和百分比单位之间的主要区别是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！