html - 如何在不破坏 % 网格的情况下为每个缩略图网格元素添加一致的边距？

Question

我在创建缩略图网格时画了一点空白，我想为我的 3 列网格 中的每个网格元素添加 20px 边距 确保每行的第一行和最后一行与容器齐平。每个网格项的宽度都是 33.33334%，所以当我向每个网格项添加 margin-right: 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%;
    }
}

演示: http://codepen.io/styler/pen/xzogr

Answer 1

基于百分比的利润如何，以保持数字完美？这使每个网格元素占 32%(其中 3 个总共占 96%)，然后在中心元素的左侧和右侧有 2% 的边距。

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

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

   .grid-inner {
   }