I currently have a wrapper holding 4 divs, I want to stack 3 of them in line than have the forth on the next row and the entire space, I'm struggling to get the size to fill the rest, I am using media tags so I may have to reset some things, here are screenshots and my code
[![enter image description here](https://i.stack.imgur.com/7hKRM.png)](https://i.stack.imgur.com/7hKRM.png)

and my code

```
#wrapper{
        display: grid;
        grid-template-columns: 25% 50% 25%;
        grid-gap: 20px;
        padding-right: 1%;
        grid-auto-rows: 1fr;
    }

```

the divs are named the same