grid-column-gapは、行の最後のdivの最後にギャップを追加します。

Question

私はCSSでグリッドを試してきました。
私は

マイ.containerが20％の幅を有する5品目のグリッドを作成し、いくつかのdivの入った容器を作成しました。

grid-column-gapを追加し、コンテナにオーバーフローが発生していることに気付きました。私はgrid-column-gapが値をgrid-template-columnsの値に加えていることが分かりました。だから私は19％の値を変更しました。

アイテムがグリッドに合っています。しかし、私の理解はgrid-column-gapがdivの間に追加されています。今私がしているのは、最後のアイテムにも右側にギャップが入っているということです。

私はdivとの間にギャップがありたいと思います。 してください。Fiddle

誰かが間違っていることを説明できますか？

Answer 1

gridのパーセンテージ単位は他の値と同様に計算されます。単位がパーセンテージの場合は、計算領域全体に余分なスペースが追加されます。

ただし、frユニットを追加すると、フレックスボックスと同様に動作し、余分なスペースは追加されません。