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）使用网格；不知道是否可以设置不同的minmax（），同时保留重复（自动拟合，..）行为：

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

B）使用 flexbox ；在CSS本地实现flexbox装订线之前，margins hack模仿了网格的装订线：

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

p { flex: 1 1 200px; }

button { flex: 1 1 100px; }

CSS网格最小最大包装

1 个答案: