CSS 网格自动填充不同宽度的列

Question

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

宽 2x1 网格

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

窄 1x2 网格

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

我查看了使用具有多列维度的 repeat(auto-fill, ...)，但随后它重复了 2 列模式，这很有意义但没有解决我的问题。我希望有一种方法可以为不同的 auto-fill 列定义不同的宽度。否则，我怀疑可能有涉及 *-content 的解决方案？我想做的事情可行吗？

Answer 1

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

Example

.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>

CSS 网格自动填充不同宽度的列

CSS Grid auto-fill columns of different widths

html

css

css-grid