1

I have divs like this:

<div class="parent">
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
</div>

And I want to align the divs in a 3 column design, like this:

enter image description here

So the height of the divs depend on the content inside.

What I've tried so far

I tried adding the display:inline-block approach and verticle-align:top; but all my results ended up with something like this:

enter image description here

What is the solution to stack them properly underneath each other like the first picture? Similar to how pinterest stacks the pin boxes...

jsFiddle for testing.

Goodbye World
  • 73
  • 5
  • I think you will need to use masonry https://masonry.desandro.com/. Some one may have a flex solution, but I am not very familiar with it. – WizardCoder Jun 21 '17 at 14:56

1 Answers1

1
<div class="parent">
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
  <div class="inner">text</div>
</div>

.inner {
  background:lightblue;
  padding:5px;
  margin:5px;
  display: inline-block;
  width: 29%;
}

The width depends on your own styling structure.