CODEWITHSUNDEEP
htmlcsslayout
najm
najm

Reputation: 894

CSS inline-block uneven spacing

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:

inline-block

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

I'm aiming for this layout:

enter image description here

Upvotes: 3

Views: 1833

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9567

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

Upvotes: 2

Related Questions