CSS 网格：百分比与'fr”单位：我应该使用哪个？

CSS 网格布局中的百分比与 Fr 单位

了解 fr 单位

功能： Fr 单位分配可用空间一个容器。

计算： 可用空间（减去网格间隙后）在 fr 列之间平均分配。

了解百分比 (%) 单位

功能： 将列宽定义为容器宽度的百分比宽度。

计算：列宽由总宽度除以列数确定，包括任何网格间隙的宽度。

区别：溢出与溢出. 分布

百分比： 由于单位长度固定，列可能会溢出到容器宽度之外和网格间隙。

Fr: 列仅占用容器内的可用空间，不会延伸到容器之外。网格间隙不会影响可用空间分配。

对网格间隙使用百分比

为了避免百分比宽度溢出，请从整个容器宽度中减去网格间隙的总宽度，然后除以数量columns:

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px))

其中：

• 8.3333% 是每列没有间隙的百分比宽度
• 9.1667px 是 11 个网格间隙的总宽度（每个 10 像素）

使用适当的百分比值宽度或实现 fr 单位，您可以管理列大小并防止 CSS 网格布局中的溢出。

以上是CSS 网格：百分比与'fr”单位：我应该使用哪个？的详细内容。更多信息请关注PHP中文网其他相关文章！