Как я могу заказать столбцы CSS горизонтально, а не вертикально для элементов разной высоты?

Question

Каждая из моих колонн имеет разную высоту.Как я могу расположить столбец горизонтально, а не вертикально, используя CSS?Также при зависании каждого элемента высота будет немного увеличиваться без наложения ниже элементов.

.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{
}
.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>

Текущий заказ

147
258
369

Но мне нужно

123
456
789

Answer 1

Пожалуйста, проверьте эту ссылку и дайте мне знать, если это работает.

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

Также, пожалуйста, проверьте эту ссылку, если вы ищете что-то подобное.https://codepen.io/andybarefoot/pen/QMeZda

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

Answer 2

Одной из возможностей является использование гибких столбцов и сортировка элементов в зависимости от их положения по модулю 3. Кроме того, вставьте псевдоэлементы для принудительного переноса

.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 3

Легко, если вы структурируете HTML по-разному:

.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>

---