Html 如何在不中断%grid的情况下为每个缩略图网格项添加一致的边距？

在创建缩略图网格时，我画了一点空白，我想向我的

3列网格中的每个网格项添加
20px边距
，确保每行的第一行和最后一行与容器齐平。每个网格项的宽度为
33.33334%
，因此当我添加
右边距时：20px到每个，然后网格断开。正如我所说，我在如何保持网格一致性上画了一个空白，每个网格项都有相同的宽度，但在第一个和第二个项目之后有一个边距

CSS

.grid-item {
    flex: 1 0 33.3334%;
    margin-right: 20px;
    &:nth-child(3n+n) {
        margin-right: 0;
    }
    .grid-inner {
        padding: 20px;
    }
    img {
        max-width: 100%;
    }
}

演示：
我认为最简单、最健壮的解决方案就是使用

您可以改为使用此CSS：

td {
    max-width: 800px;
    margin: auto;
    display: inline-block;
    align-content: center;
}

img {
    max-width: 100%;
    padding: 10px;
}

这将简化计算，并且需要
flex
和
flex-wrap
等。
基于百分比的利润率如何，以保持数字的完美？这样，每个网格项目的利润率为32%（其中3个项目的利润率为96%），然后在中心项目的左右两侧各有2%的利润率

.grid-item {
   flex: 1 0 32%;

   &:nth-child(3n+2) {
     margin:0 2%;
   }

   .grid-inner {
   }

你已经在网格内部有20px的填充。你还需要网格项目上的20px保证金吗？或者你是说你想去掉那些填充物？嘿，是的，我需要在每个网格项目之间留出空间