Keep equal gaps between CSS multi-column items

Question

I want the left-most and right-most margins of my columns to be the same as the space in between them. I think my codepen demonstrates it pretty well. Just in case that isn't clear,

I'd like the red gaps labeled in red to all be the same, as opposed to how they currently are.

Here's the code I'm basing this off of:

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

De the `.item`s that you want to display in your columns have a fixed width? — woestijnrog, Dec 02 '15 at 10:50
Yep. It doesn't matter though, I'm just going to move to Masonry. — Jack Guy, Dec 02 '15 at 16:32

score -1 · Answer 1 · answered Dec 02 '15 at 05:51

-1

You can do this

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

answered Dec 02 '15 at 05:51

r2_d2

203
3
14

It depends on relative to which you wanted to align columns. I assuming you are not going for responsive design. So you can make column div of certain size and you can divide into sections you mentioned above. So u can get x value from 6X+3*200= Total Div Width. Anyway this is not the best case – r2_d2 Dec 02 '15 at 06:19
Sorry but I don't think you actually looked at my code. CSS 3 multi-columns are fluid. – Jack Guy Dec 02 '15 at 06:20

Keep equal gaps between CSS multi-column items

1 Answers1