Css сетки Minmax Wrap

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

Я хочу, чтобы абзацы были размером не менее 200 пикселей, начиная с css minmax, а кнопка - не менее 100 пикселей, а обертка уменьшала окно браузера.ширина.

но этого не происходит.

Элементы остаются в одном ряду.

Спасибо

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

А) Использовать сетка ;не знаю, если возможно установить другое minmax () при сохранении поведения повторения (автоподгонки, ..):

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

B) Использовать flexbox ;хакерство полей имитирует сточные канавы сетки до тех пор, пока в CSS не будут реализованы собственные флексбоксы:

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

p { flex: 1 1 200px; }

button { flex: 1 1 100px; }