html css change width of column in certain row

Question

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

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

Answer 1

You could create a grid-template-areas as previously stated. Alternatively, each row could be its own grid within a larger 'container' grid. Basically a grid within a grid. This might provide more flexibility moving forward if your column spacing will change row by row.

See the example here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

Answer 2

you can add grid-template-areas like this :

grid-template-areas: 
      "outline design accesibility" 
       "seo seo seo";

and add the names to each container : ex : grid-area: seo;