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

【问题标题】：CSS Grid auto-fill columns of different widthsCSS Grid 自动填充不同宽度的列
【发布时间】：2018-08-30 08:55:51
【问题描述】：

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

宽 2x1 网格

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

窄 1x2 网格

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

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

【问题讨论】：

Michael 会知道得更多，但我认为您被媒体查询所困扰。在某些时候，你会违反我怀疑的隐含或明确声明的网格。 CSS-Grid 是一个强大的布局系统，但它并不神奇。
坦率地说，这听起来像是 flexbox 应该处理的东西......但即便如此我认为你需要媒体查询。

标签： html css css-grid

【解决方案1】：

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

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>

【讨论】：