在CSS多列项之间保持相同的间隙

Question

我希望列的最左边和最右边距与它们之间的空间相同。我认为my codepen很好地证明了这一点。以防万一不清楚，

我希望用红色标记的红色间隙全部相同，而不是它们现在的状态。

这里的代码是基于以下代码：

.columns {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-rule: solid 1px #000;
  -moz-column-rule: solid 1px #000;
  column-rule: solid 1px #000;
  text-align: center;
  width: 100%;
  display: block;
}
.item {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #f00;
  margin-bottom: 20px;
}

Answer 1

你可以这样做

.item {
display: inline-block;
width: 200px;
height: 200px;
background-color: #f00;
margin-bottom: 20px;
margin-left Xpx; //Add this
margin-right Xpx;//Add this ,X is your desired value
}