CSS inline-block uneven spacing

Question

So I have two columns of cards and each card has the inline-block property. Each is of variable height so there is uneven white space in between each card like so:

Short of having two separate columns, how can I get spacing between each card even?

I'm aiming for this layout:

Can you post some html/css or a jsfiddle? It would help those of us trying to help you — perennial_, Aug 24 '15 at 15:56
Also some idea of how this is **supposed** to look....it's not clear at present. — Paulie_D, Aug 24 '15 at 16:00
Duplicate of http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Aug 24 '15 at 16:10
possible duplicate of [HTML Fluid Multi Column Layout (newspaper) for text](http://stackoverflow.com/questions/5798457/html-fluid-multi-column-layout-newspaper-for-text) — easwee, Aug 24 '15 at 22:03

score 2 · Answer 1 · answered Aug 24 '15 at 15:59

Either use column layout, like so:

.cards {
  columns: 300px 2;
}

.cards div {
  display: inline-block;
}

Or use a flex layout:

.cards {
  display: flex;
  flex-direction: row; /* or column if you want them displayed vertically */
}
.cards div {
  flex: 1 1 auto;
}

Or if you just want them displayed at the top always:

.cards div {
   display: inline-block;
   vertical-align: top;
}

CSS inline-block uneven spacing

1 Answers1