如何为每个网格元素指定不同的大小并保持环绕？

Question

问题：

现在，下面的两个网格元素的大小均为min: 250px, max: 1fr。它们以屏幕尺寸<250px

包装

我正在努力实现以下目标：

• 第一个元素为min: 250px, max: 2fr
• 第二个元素为min: 250px, max: 1fr

但还要在屏幕尺寸1fr上保持每个<250px的环绕（基本上是现在的环绕方式）

代码：

Codepen：https://codepen.io/anon/pen/dEBQgm?editors=1100

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

...

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

.child {
  background: #aaa;
  height: 32px
}

我尝试过这个，但是我丢了包裹：

grid-template-columns: minmax(250px, 2fr) minmax(250px, 1fr);

Answer 1

您可以尝试使用flexbox：

.container {
  display: flex;
  flex-wrap: wrap;
  margin:-8px; /*Pay attention to this! You may need overflow:hidden on a parent container*/
}

.child {
  background: #aaa;
  height: 32px;
  min-width: 250px;
  flex-basis: 0%;
  margin: 8px;
}

.container> :first-child {
  flex-grow: 2;
}

.container> :last-child {
  flex-grow: 1;
}

.container-grid {
  display: grid;
  grid-template-columns: minmax(250px, 2fr) minmax(250px, 1fr);
  grid-gap:16px;
}
.container-grid > .child {
  margin:0;
}

flexbox with wrapping
<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>
grid without wrapping:
<div class="container-grid">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>