Grid layout, need 3 divs to occupy 2 columns and a row - css

Question

I have the following markup:
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
I want the layout to accomplish a layout in which the first two child divs are arranged next to each other as two columns while the 3rd sits on a row of its occupying full width.
The first child column will be a fixed width (30px), while the second should occupy the remaining space.
I have tried this, but it doesn't accomplish what I need:
.wrapper {
display: grid;
grid-template-columns: 20px auto 100%;
border:1px solid white;
}

Answer 1

Maybe something like this
.wrapper {
display: grid;
grid-template-columns: 30px 1fr;
grid-gap: 1rem;
}
.child {
padding: 1rem;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.three {
grid-column: 1 / -1; /* 👈 It makes this element take all available columns (the whole row)
}
<div class="wrapper">
<div class="child one">One</div>
<div class="child two">Two</div>
<div class="child three">Three</div>
</div>

Answer 2

That's the method I prefer.
First, you fraction in four with grid-template: 1fr 1fr / 1fr 1fr. This is column sizes / row sizes
After that, imagine you have two squares together in the first row (first 1fr 1fr)
Now imagine the three lines (The first line of the left square draws one vertical line, the two squares touching draw a second line, and the 2nd square draws the third one).
|▢|▢|
So, you say to #red, start in line 1 and finish in line 2 grid-column: 1 / 2, to the #green, start in the two and finish in the 3, and so on.
The result looks like this:
.grid
{
display: grid;
grid-auto-flow: row dense;
/* This is column column / row row */
grid-template: 1fr 1fr / 1fr 1fr;
height: 300px;
}
#red {
background-color: red;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
#green {
background-color: green;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
#blue {
background-color: blue;
grid-column: 1 / 3;
grid-row: 2 / 3;
}
/* To make the first row 30px you can use this instead */
.grid
{
grid-template: 1fr 1fr / 30px 1fr;
}
<div class="grid">
<div id="blue">Blue</div>
<div id="red">Red</div>
<div id="green">Green</div>
</div>