html 如何在中创建项目垂直排列的三列列表

xytpbqjk 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(103)

我在使用display设置ul样式时遇到了一个问题：列表应如下图所示。此ul中的元素可以有不同的高度。Expected behavior
到目前为止，我已经为ul添加了样式：网格-模板-列：1fr 1fr 1fr和滤线栅自动流动：对于li元素，根据列元素应该是：网格-列：1或网格-列：2或网格-列：3.

.wrapper {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: columns;
  row-gap: 10px;
  column-gap: 10px;
}

.first-column {
  grid-column: 1;
  height: 200px;
  background-color: skyblue;
}

.second-column {
  grid-column: 2;
  height: 500px;
  background-color: aquamarine;
}

.third-column {
  grid-column: 3;
  height: 300px;
  background-color: silver;
}

<ul class="wrapper">
    <li class="first-column"></li>
    <li class="first-column"></li>
    <li class="second-column"></li>
    <li class="second-column"></li>
    <li class="third-column"></li>
    <li class="third-column"></li>
  </ul>

但是，这会导致行高由行中最高的元素决定，就像下面的图片所示。
current behavior

Html

来源：https://stackoverflow.com/questions/74808971/how-to-create-a-three-column-list-in-with-items-arranged-vertically

1条答案

按热度按时间

xlpyo6sf1#

我是这么做的：

.grid{
    display: grid;
    grid-template-columns: 100px 200px 100px;
    column-gap: 50px; /* The gap you want */
}
.col{
    display: grid;
    grid-template-rows: repeat(4, 100px);
    row-gap: 100px; /* The gap you want */
}
.col.spec{
    grid-template-rows: repeat(3, 200px);
    row-gap: 50px; /* The gap you want */
}
.elm{
    width: 100%;
    border: 1px solid black;
}

<div class="grid">
  <div class="col">
    <div class="elm"></div>
    <div class="elm"></div>
    <div class="elm"></div>
    <div class="elm"></div>
  </div>
  <div class="col spec">
    <div class="elm"></div>
    <div class="elm"></div>
    <div class="elm"></div>
  </div>
  <div class="col">
    <div class="elm"></div>
    <div class="elm"></div>
    <div class="elm"></div>
    <div class="elm"></div>
  </div>
</div>

您可以随时调整样式和尺寸，因为你想要的，但要确保使它的React。

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何在中创建项目垂直排列的三列列表

1条答案

相关问题

热门标签

最新问答