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值的组合，以便文本在不包装时占用剩余空间，但图像在堆叠时仍然可以增长。

Example

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: