How can I order CSS columns horizontally instead of vertically for auto height elements?

Question

Each of my columns has different heights. How can I order my column to horizontally instead of vertical using CSS? Also on hovering of each item, the height will increase a little bit without overlapping below items.

.parent{
    /*display: flex;
    flex-flow: column wrap;
    height:600px; */

    column-count: 3;
    column-gap: 20px;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
}
.child{
    background-color:#eee;
    margin-bottom:2px;
}
.child:hover{
    min-height:300px;
}

<div class="parent">
    <div class="child" style="height:100px">1</div>
    <div class="child" style="height:120px">2</div>
    <div class="child"  style="height:200px">3</div>
    <div class="child"  style="height:100px">4</div>
    <div class="child"  style="height:50px">5</div>
    <div class="child"  style="height:100px">6</div>
    <div class="child"  style="height:100px">7</div>
    <div class="child"  style="height:100px">8</div>
    <div class="child"  style="height:100px">9</div>
</div>

Current order is

147
258
369

But I need

123
456
789

Answer 1

One possibility is to use flex columns, and sort the items depending on their position modulo 3. Also, insert pseudo elements to force the wrap

.parent {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  height: 500px;
  width: 300px;
}

.child {
  margin: 5px;
  width: 100px;
  background-color: lightgreen;
  transition: padding 1s;
}

.child:hover {
   padding: 30px 0px;
}

.child:nth-child(3n + 1) {
  order: 1;
}

.child:nth-child(3n + 2) {
  order: 10;
}

.child:nth-child(3n) {
  order: 20;
}

.parent:before,
.parent:after {
  content: "";
  width: 0px;
  height: 999px;
}

.parent:before {
  order: 5;
}

.parent:after {
  order: 15;
}

<div class="parent">
  <div class="child" style="height:100px">1</div>
  <div class="child" style="height:120px">2</div>
  <div class="child" style="height:200px">3</div>
  <div class="child" style="height:100px">4</div>
  <div class="child" style="height:50px">5</div>
  <div class="child" style="height:100px">6</div>
  <div class="child" style="height:100px">7</div>
  <div class="child" style="height:100px">8</div>
  <div class="child" style="height:100px">9</div>
</div>

Answer 2

Please check this link and let me know if it worked.

https://jsfiddle.net/sreenath124/cp2vj9sh/

html

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
</div>

css

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 1fr;
}

.child {
  border: 1px solid;
  padding: 10px;
  transition: all 0.5s ease;
}
.child:hover {
  transform: scale(1.1);
}

Also please check this link if you are looking for something like this. https://codepen.io/andybarefoot/pen/QMeZda

https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb

Answer 3

It is easy if you structure the HTML differently:

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.child {
  /* Just to demonstrate */
  background-color: powderblue;
  margin: 1px;
}
.child:hover {
  min-height: 40px;
}

<div class="parent">
  <div class="column">
    <div class="child" style="height: 25px">1</div>
    <div class="child" style="height: 30px">4</div>
    <div class="child" style="height: 40px">7</div>
  </div>
  <div class="column">
    <div class="child" style="height: 30px">2</div>
    <div class="child" style="height: 20px">5</div>
    <div class="child" style="height: 30px">8</div>
  </div>
  <div class="column">
    <div class="child" style="height: 30px">3</div>
    <div class="child" style="height: 30px">6</div>
    <div class="child" style="height: 30px">9</div>
  </div>
</div>

---