如何根据各列中项目的内容制作等宽项目？

Question

我正在尝试实现以下布局。目标是让内容框根据它们的内容在垂直方向上对齐并具有相等的宽度。第一个布局是桌面页面，第二个是它在移动设备上的外观。我已经对方框进行了编号以显示所需的顺序。

我已经包含了一个 JSFiddle，说明我如何设法使桌面视图正常工作，但问题是由于 HTML 结构，移动视图的顺序不正确。

我能看到的唯一方法是将 HTML 简化为 6 个直接子 li 元素，然后使用 CSS 为它们分配宽度，或使用 JS 以编程方式分配宽度。或者，我可以创建两个单独的 HTML 模块，一个用于桌面，一个用于移动，并使用 CSS 来隐藏/显示它们。

不过，这些解决方案似乎过于复杂。有没有更优雅的解决方案，需要更少的代码行和开发时间？

https://jsfiddle.net/2sLdpk4e/2/

ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 600px;
  border: 2px solid black;
  padding: 20px;
}

li{
  display: block;
  margin-right: 20px;
}

li:last-child{
  margin-right: 0;
}

.group-item{
  background: green;
  padding: 20px;
  margin-bottom: 20px;
}

.group-item:last-child{
  margin-bottom: 0;
}

<ul>
  <li>
    <div class="group">
      <div class="group-item">
        1 Cont
      </div>
      <div class="group-item">
        4 Contentttt
      </div>
    </div>
  </li>
  <li>
    <div class="group">
      <div class="group-item">
        2 Cont
      </div>
      <div class="group-item">
        5 Content Contentttt
      </div>
    </div>
  </li>
  <li>
    <div class="group">
      <div class="group-item">
        3 Content Content
      </div>
      <div class="group-item">
        6 Cont
      </div>
    </div>
  </li>
</ul>

Answer 1

CSS-Grid 可以做到这一点，而无需将项目包装成组......

body {
  display: inline-grid;
  grid-template-columns: repeat(3, max-content);
  gap: 1em;
  border: 1px solid black;
  margin: 1em;
  padding: 1em;
}

.group-item {
  border: 1px solid red;
}

<div class="group-item">
  1 Cont
</div>
<div class="group-item">
  2 Cont
</div>
<div class="group-item">
  3 Content Content
</div>
<div class="group-item">
  4 Contentttt
</div>

<div class="group-item">
  5 Content Contentttt
</div>

<div class="group-item">
  6 Content
</div>

对于较小的视口，只需使用媒体查询并将整个包装器的显示属性（这里我使用body）更改为display:block，您的项目自然会变成一列。

代码笔演示