Its not possible how you are doing it at the moment.
Think about it, you are splitting row5 into 2 equal widths, and 2 rows then asking box1, box2, box3 and box4 to sit within the grid, taking up 1 grid square each BUT setting a width of 30% for each of the boxes will only consume 30% of the width of each grid square, so there is ALWAYS going to be the 70% space to the right of the boxes!
Your best option would be to wrap your 4 boxes in a seperate <div> and set its width to 60% then apply the grid to that 1fr 1f makes 30% so your boxes will sit side by side then try and control how they react/look as the screen gets narrow using media queries.
Also your footer is NOT within the container div so there is no need to apply any grid related css to it UNLESS you move it within the grid.
Hello
I did the following using Flex and Grid. I changed from a 2x2 pattern to in this case 4 across. When I resize the screen it will collapse to 1 column. No width is defined. The content will determine that. If I remove the following the footer will shrink to the width of 2 columns.
footer {
grid-column: span 3;
My test site: http://davidswebsite.com/test/basic_layout1.html
.boxwrapper {
display: flex;
}
@media (min-width: 768px) {
.row5 {
display: grid;
grid-column-start: 2;
}
}
@media (max-width: 480px) {
.boxwrapper {
display: grid;
width: 100%;
}
}
.
AdChoices