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

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，您的项目自然就会成为一列。

Codepen Demo