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

I have the following markup:

<div >
    <div >One</div>
    <div >Two</div>
    <div >Three</div>
</div>

I would like 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 it's own 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;
}

CodePudding user response：

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; /*