grid-column-gap 在行的最后一个 div 末尾添加间隙
grid-column-gap adds gap at the end of the last div in the row
我一直在试验 css 中的网格并遇到以下问题。
我创建了一个包含多个 divs
的容器
我的 .container 创建了一个包含 5 个项目的网格，宽度为 20%。
我添加了 grid-column-gap 并注意到它在容器中造成了溢出。我发现 grid-column-gap 将其值添加到 grid-template-columns 值。所以我将它的值更改为 19%。
现在项目适合网格。但是我的理解是 grid-column-gap 是在 div 之间添加的。我现在所拥有的是最后一项在右侧也有一个缺口。
我想在 div 之间留出空隙，而不是在末尾。
请参阅 Fiddle
谁能解释我做错了什么？
grid 上的百分比单位与其他任何单位一样计算。如果您的单位是百分比，它将向整个计算区域添加额外的 space。
但是，如果您添加 fr 单元，它将像 flexbox 一样工作，并且不会添加额外的 space。
我一直在试验 css 中的网格并遇到以下问题。
我创建了一个包含多个 divs
我的 .container 创建了一个包含 5 个项目的网格，宽度为 20%。
我添加了 grid-column-gap 并注意到它在容器中造成了溢出。我发现 grid-column-gap 将其值添加到 grid-template-columns 值。所以我将它的值更改为 19%。
现在项目适合网格。但是我的理解是 grid-column-gap 是在 div 之间添加的。我现在所拥有的是最后一项在右侧也有一个缺口。
我想在 div 之间留出空隙，而不是在末尾。
请参阅 Fiddle
谁能解释我做错了什么？
grid 上的百分比单位与其他任何单位一样计算。如果您的单位是百分比，它将向整个计算区域添加额外的 space。
但是，如果您添加 fr 单元，它将像 flexbox 一样工作，并且不会添加额外的 space。