如果直接这样设置： ``` grid-template-columns: repeat(2, 50%); grid-column-gap: 20px; ``` 他会影响整体的宽度，因为这样做分成了两份，一份占了50%,然后还多了20px的间距，如何能够做到是整体宽度减去间距之后剩下的宽度在各占50%呢。 使用`calc()`函数就行了。 ``` .container { display: grid; grid-template-columns: repeat(2, calc(50% - 10px)); /* Each column takes 50% minus half of the gap */ grid-column-gap: 20px; /* 20px gap between columns */ } ``` calc(50% - 10px) 表示每列的宽度是 50% 减去 10px（因为总间隙是 20px，所以每边分摊 10px）。 ### 方法2 其实还有一种思路，就是直接设置各占50%后，不使用grid-column-gap设置间距，在每个子项里边设置一个左右的间距也可以实现同样的效果。