CSS 网格布局：百分比与'fr”单位 – 有什么区别？

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

使用 CSS 配置网格布局时，用于指定列和行大小的单位选择可能会影响布局的行为。两种常用的单位是百分比和分数单位 (fr)。让我们在 CSS 网格布局的上下文中检查这些单位之间的主要区别。

fr 单位

fr 单位表示考虑网格间隙后网格容器内可用空间的分数单位。本质上，它允许列或行占用一定比例的剩余空间。可用空间在具有 fr 值的列或行之间平均分配。

这可确保元素的大小随着网格容器大小的调整而相应地缩放。由 grid-column-gap 和 grid-row-gap 定义的网格间隙，在计算 fr 值之前从可用空间中减去。

百分比单位

百分比单位，另一方面，将列或行的宽度指定为整个网格容器（包括网格间隙）的百分比。这意味着元素的大小是固定的，并且它们不会根据容器的大小动态调整。

因此，可能会遇到列的总宽度（包括网格间隙）的情况，超过网格容器的宽度。这可能会导致布局溢出容器。

示例

为了说明行为差异，请考虑以下网格布局：

.grid {
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

在本例中，百分比单位用于定义列宽。结果，列的总宽度，包括网格间隙（11 个间隙，间隙为 10px），超过了网格容器的宽度，导致布局溢出。

但是，如果我们切换到使用fr 单位改为：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

现在，列占用了可用空间的比例，并且在计算之前从总空间中减去网格间隙fr 值。这会导致响应式布局根据网格容器的大小动态调整。

结论

为网格布局选择适当的单位取决于所需的行为。当您需要固定大小时，百分比单位是合适的，而当您需要根据可用空间缩放的响应式布局时，fr 单位是有用的。了解这些单元之间的差异及其对布局的影响对于创建高效且视觉上令人愉悦的 CSS 网格布局至关重要。

以上是CSS 网格布局：百分比与'fr”单位 – 有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！