Center content in Grid - css

Question

I want the content of a grid to be centered. Like the example above.
The Boxes are dynamic. Like the example there can be multiple Box on a row and multiple rows. The Nav is always there.
I want the Boxes and Nav to be centered.
My problem is in the above image. When the screen becomes smaller the Boxes should line break like the example however the distance between Boxes and Nav is of. This is becuase I can't set width:fit-content on the left column since the boxes are dynamic.
Here is a CodeSandbox
Update
This is what the end result should look like.
The sidebar is always there to the right but the number of boxes to the left can vary per row. The amount of rows with boxes can also vary.

Answer 1

Understand you, here is what you need.
*,
*::before,
*::after {
box-sizing: border-box;
}
img,
picture {
max-width: 100%;
display:block;
}
body{
min-height: 100vh;
background-color: bisque;
overflow: hidden;
}
.container{
width: 100%;
margin: 0 auto;
display: grid;
place-content: center;
grid-template-columns: 1fr auto 1fr 1fr ;
grid-template-rows: 1fr 1fr 1fr;
gap:2rem;
}
.first-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.second-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box{
min-width: 5rem;
width:100px;
max-width: 100px;
height: 100px;
background-color: greenyellow;
border: 1px solid black;
display: flex;
flex-basis: 5rem;
flex-grow: 1;
}
.nav{
width: 100px;
height: 300px;
background-color: aquamarine;
border: 1px solid black;
}
<div class="container">
<div class="boxes">
<div class="first-row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="second-row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div class="nav"></div>
</div>
Also check this please
flex-box: shrink before wrap