如何针对不同的高度元素水平而不是垂直地订购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

一种可能性是使用flex列，并根据它们的位置模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 2

如果以不同方式构造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>

---

Answer 3

请检查此链接，并告诉我它是否有效。

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