Css 网格最小最大换行

Question

我有以下包含 3 个元素的网格:

<div class="grid">
<p>&nbsp;</p>
<p>&nbsp;</p>
<button>&nbsp;</button>
</div>

.grid {
    display: grid;
    justify-content: flex-start;
    align-items: flex-end;
    grid-template-columns: minmax(200px, 1fr)  minmax(200px, 1fr) minmax(100px, 1fr);
    grid-gap: 2rem;
}

我希望从 css minmax 开始，段落至少为 200px，按钮至少为 100px，并随着浏览器窗口宽度的减小而换行。

但这并没有发生。

元素保持在一行。

谢谢

Answer 1

足够接近您想要的(没有媒体查询和不值得麻烦的复杂规则):

HTML:

<div class="container">
  <p>Lorem ipsum</p>
  <p>Delor sit</p>
  <button>Amet</button>
</div>

CSS:

// See the container's items:
.container > * { background: lightblue; }

A) 使用网格；不知道是否可以在保留 repeat(auto-fit, ..) 行为的同时设置不同的 minmax():

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

B) 使用flexbox；在 CSS 原生实现 flexbox 装订线之前，margin hack 模仿网格的装订线:

.container {
  display: flex;
  flex-wrap: wrap;
  margin-right: -2rem;
}
.container > * { margin-right: 2rem; }

p { flex: 1 1 200px; }

button { flex: 1 1 100px; }