CSS 网格：两列，除非小于 150px

Question

我有一个网格谜语，看起来很简单，但我就是不知道，两次人工智能聊天也失败了。 我有这个：

.cont {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
 }
.box {background-color: grey;}

<div class="cont">
<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="box">four</div>
</div>

我需要的是，盒子始终具有完整的可用宽度，并且位于两列（且只有两列），除非屏幕变得太小并且盒子将变得小于 150px，在这种情况下切换到一列。不使用媒体查询。 书面规则“网格模板列”只是我尝试过的事情之一，它是一个经典（来自凯文·鲍威尔），如果您允许在更宽的显示上显示任意数量的列，那就太棒了。 如果你能用 flex 达到同样的效果，我想那也很好。

Answer 1

如果你稍微改变一下 HTML，这是可能的，就像这样：

.cont {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
 }
.box {background-color: grey;}

<div class="cont">
<div class="inner">
<div class="box">one</div>
<div class="box">two</div>
</div>
<div class="inner">
<div class="box">three</div>
<div class="box">four</div>
</div>
</div>