Question

我在创建缩略图网格时画了一些空白，我想在20px margin的每个网格项中添加3 column grid，确保每行的第一行和最后一行与容器齐平。每个网格项的宽度都为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 {
   }

Answer 2

我认为最简单，最强大的解决方案就是使用<table>。

您可以改为使用此CSS：

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

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

这会简化数学运算，并且需要flex和flex-wrap等。

如何在不破坏％网格的情况下为每个缩略图网格项添加一致的边距？

2 个答案: