0

I am trying to use display: flex to stack child-divs like this: Example

I tried:

.parent {
    display: flex;
    flex-wrap: wrap;
}
. children {
    flex-basis: 50%;
}

But then the Items are vertically aligned (Every child has one starting right next to it).

Additionally i want the lowest (vertical-wise) to be certain items.

How can i accomplish that, thank you in advance!

.children {
  padding: 10px;
  border: 1px solid;
  flex-basis: 45%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
}
<div class="parent">
  <div class="children height1">Heriberto Nickel<br>New Line for different Heights<br>AnotherLine</div>
  <div class="children">Brittaney Haliburton</div>
  <div class="children">Maritza Winkler</div>
  <div class="children">Carmon Rigg<br>AnotherLine</div>
  <div class="children">Alice Marmon</div>
  <div class="children">Lyman Steakley</div>
  <div class="children">Zenia Correa<br>AnotherLine</div>
</div>
endlacer
  • 135
  • 8
  • question require minimal reproducible example.. plz [read](https://stackoverflow.com/help/minimal-reproducible-example) – نور Sep 02 '20 at 05:16
  • Provide your html code as well that is related with the CSS you have provided. – Gosi Sep 02 '20 at 05:41
  • What you want is called "masonry layout", I don't have enough knowledge to explain but try searching for it. – ranieri Sep 02 '20 at 05:47
  • 1
    for a 2 column ... `column-count:2` should also be fine enough : https://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css/46698382#46698382 example : https://jsfiddle.net/ev8npmoa/ – G-Cyrillus Sep 02 '20 at 07:52

0 Answers0