Как указать разные размеры для каждого элемента сетки и сохранить перенос?

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>