在 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
}