使用grid布局实现每行2个，间距20px，每项占用间距之后剩下宽度的50%

如果直接这样设置：

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设置间距，在每个子项里边设置一个左右的间距也可以实现同样的效果。