css - CSS の複数列項目間のギャップを均等に保つ

Question

列の左端と右端の余白を、それらの間のスペースと同じにしたいです。私のコードペンはそれをかなりうまく示していると思います。それがはっきりしない場合に備えて、

現在の状態とは対照的に、赤でラベル付けされた赤いギャップがすべて同じであることを望みます。

これが私がこれに基づいているコードです：

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