Css grid minmax wrap - css

Question

I have the following grid with 3 items:
<div class="grid">
<p> </p>
<p> </p>
<button> </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;
}
I want the paragraphs to be at least 200px as from css minmax and the button to be at least 100px and wrap as a decrease the browser window width.
but this doesnt happen.
The elements stay in one row.
Thank you

Answer 1

Close enough to what you wanted (without media queries and convoluted rules not worth the trouble):
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) Use grid; don't know if possible to set different minmax() while preserving repeat(auto-fit, ..) behavior:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 2rem;
}
B) Use flexbox; the margins hack mimicks grid's gutters until CSS implements flexbox gutters natively:
.container {
display: flex;
flex-wrap: wrap;
margin-right: -2rem;
}
.container > * { margin-right: 2rem; }
p { flex: 1 1 200px; }
button { flex: 1 1 100px; }