1

I am trying to create a container with 2 columns with a bunch of images of different sizes (I want them to stay different sizes) that align like this:

enter image description here

I have tried using flexbox like this:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
    flex-basis: 50%;
}

but the result of this is the following which every 2 columns get aligned to the top, but I want the images to float to each other as shown in the previous screenshot.

enter image description here

I have tried using floats but the following weird behavior happens:

.container {
    display: block;
}

.item {
    width: 50%;
    display: inline-block;
    float: left;
}

enter image description here

Does anyone know how to correctly align images to each other as the first image shows?

Anatol
  • 3,720
  • 2
  • 20
  • 40

1 Answers1

1

Please refer following test code.

#container {
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
    height: 145px;
    width: 100px;
}

.block {
    width: 50px;
    background-color: red;
    margin: 0 0 5px 0;
}
<div id="container">
    <div class="block" style="height:30px"></div>
    <div class="block" style="height:30px"></div>
    <div class="block" style="height:70px"></div>
    <div class="block" style="height:70px"></div>
    <div class="block" style="height:50px"></div>
</div>
WebDev
  • 587
  • 1
  • 6
  • 23
  • works perfectly! Thanks so much! – Anatol Jun 05 '20 at 18:14
  • so with `column-count`, if I had 8 items, the 1st column would contain items 1, 2, 3, 4, and the 2nd column would contain items 5, 6, 7, 8. Is there a way to have it be spread differently like this: column 1 with items 1, 3, 5, 7 and column 2 with items 2, 4, 6, 8. Basically so that the items will be spread horizontally instead of vertically? – Anatol Jun 05 '20 at 18:20