Let CSS grid row fill available space - html

Question

I'm working with CSS-grids and I want the last row of my CSS-grid to use all remaining space in the wrapper but at the same time I want all other rows to follow the min-content-strategy.
CSS for the wrapper:
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100px auto;
grid-auto-rows: min-content;
row-gap: 7px;
justify-items: start;
align-items: start;
}
My initial idea how to achieve this was to simply add margin-top: auto to the button as one would do with flexbox. I have also tried to set grid-auto-rows: auto for the grid wrapper but it does not work either.
Edit: Example code: https://jsfiddle.net/xt139o2g/ (I want button to appear in lower right corner of the wrapper div)
.wrapper {
border: 1px solid blue;
height: 300px;
width: 250px;
padding: 10px;
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100px auto;
grid-auto-rows: min-content;
row-gap: 7px;
justify-items: start;
align-items: start;
}
.button {
grid-column: 1 / -1;
justify-self: end;
align-self: end;
}
<div class="wrapper">
<div class="grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R2C1
</div>
<div>
R2C2
</div>
<div class="button">
Button
</div>
</div>
</div>
Thanks in advance!

Answer 1

You can use the repeat function to set the first two rows to min-content:
grid-template-rows: repeat(2, min-content);
Then, use display: flex on .button and shift its content to the bottom right using justify-content and align-items:
display: flex;
align-items: flex-end;
justify-content: flex-end;
Demo: (I've added borders to demonstrate the spacing.)
.wrapper {
border: 1px solid blue;
height: 300px;
width: 250px;
padding: 10px;
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: repeat(2, min-content);
row-gap: 7px;
}
.grid>div {
width: 100%;
height: 100%;
border: 1px solid;
}
.button {
display: flex;
align-items: flex-end;
justify-content: flex-end;
grid-column: 1 / -1;
}
<div class="wrapper">
<div class="grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R2C1
</div>
<div>
R2C2
</div>
<div class="button">
Button
</div>
</div>
</div>

Answer 2

I don't think there is a trivial way to achieve this but you can appromxiate it like below:
.wrapper {
display:inline-block;
border: 1px solid blue;
height: 300px;
width: 200px;
padding: 10px;
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100px auto;
grid-template-rows:repeat(100,min-content) 1fr; /* big number here*/
}
.grid *:not(:last-child) {
margin-bottom:7px; /* replace the gap */
}
.button {
grid-column: 1 / -1;
grid-row: 101; /* place it at the 1fr template */
margin:auto 0 0 auto;
}
<div class="wrapper">
<div class="grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R2C1
</div>
<div>
R2C2
</div>
<div class="button">
Button
</div>
</div>
</div>
<div class="wrapper">
<div class="grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div class="button">
Button
</div>
</div>
</div>
<div class="wrapper">
<div class="grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R1C1
</div>
<div>
R1C2
</div>
<div class="button">
Button
</div>
</div>
</div>