相关疑难解决方法(0)

我想弄清楚flexbox如何工作(应该工作？...),如下所示:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage …

我一直在尝试使用 css 网格创建响应式组件，而不是依赖媒体查询，以便它可以利用不同布局中的可用空间。如果空间足够大，应该有两列，第一列是固定宽度（包含图像），第二列是剩余的（带有文本），一个 2x1 的网格。如果不是，那么应该有一列占据所有可用空间，并且网格更改为 1x2，例如

宽 2x1 网格

+---+---------+
| o | text    |
+---+---------+

窄 1x2 网格

+---------+
|    o    |
+---------+
| text    |
+---------+

我看着使用repeat(auto-fill, ...)多列维度，但随后它重复了 2 列模式，这是有道理的，但不能解决我的问题。我希望有一种方法可以为不同的auto-fill列定义不同的宽度。否则，我怀疑可能有一个解决方案涉及*-content? 我正在尝试做的可能吗？

是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？

我有隐式类，允许行包装到新行上，但是没有最大列数。

这是使用弹性盒的一种方法的代码笔

CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

另一种方法是使用网格

.grid {
  display: grid;
  counter-reset: grid-items;
  position: relative;
}


.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？