CSS Grid 自动填充不同宽度的列

Question

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

宽 2x1 网格

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

窄 1x2 网格

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

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

Answer 1

Paulie_D，你是对的，这用 flexbox 处理得更好，但事实证明它不需要媒体查询。基本上需要flex-wrap: wrap不同flex-grow值的组合，以便文本在不换行时占用剩余空间，但图像在堆叠时仍然可以增长。

例子

.Profile {
  display: flex;
  flex-wrap: wrap;
  padding: .5rem;
}
.Profile-img {
  flex: 1 0 0;
  background: blue;
  margin: .5rem;
}
.Profile-text {
  flex: 10 0 10em;
  background: red;
  margin: .5rem;
}
img {
  width: 100px;
  height: 100px;
  background: black;
  display: table;
  margin: 0 auto;
}

<div style="width: 600px">
  <div class="Profile">
    <div class="Profile-img">
      <img/>
    </div>
    <div class="Profile-text">
      Text
    </div>
  </div>
</div>
<div style="width: 300px">
  <div class="Profile">
    <div class="Profile-img">
      <img/>
    </div>
    <div class="Profile-text">
      Text
    </div>
  </div>
</div>