Fixed column gap css - html

Question

I am trying to make a layout where divs fall into a columns each with width 250px, so wider screens have more columns.
I also want the gap between the columns to remain the same in this case 5px. The problem is when I readjust the width of the screen the gap changes in size (although the columns remain 250px and a new one is added or removed when there is enough extra space).
The extra space when I expand the screen to when a new column is rendered should go on either side of the column container;
My container is the following:
#my-pages-list-holder-new-fu{
overflow-y: scroll;
column-width: 250px;
justify-content: center;
column-gap: 5px;
}
/*my blocks which fall into the columns have this code:*/
.post-wrapper-tue{
height: fit-content;
width:250px;
margin-bottom: 10px;
-webkit-box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
}

Answer 1

Try this:
<style>
#my-pages-list-holder-new-fu{
overflow-y: scroll;
column-width: 250px;
justify-content: center;
column-gap: 2vw;
}
/* my blocks which fall into the columns have this code: */
.post-wrapper-tue{
height: fit-content;
width:250px;
margin-bottom: 10px;
-webkit-box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
}
</style>
<div id="my-pages-list-holder-new-fu">
<div class="post-wrapper-tue">
<text>Ze Block</text>
</div>
<div class="post-wrapper-tue">
<text>Ze Other Block</text>
</div>
<div class="post-wrapper-tue">
<text>Ze Other Other Block</text>
</div>
</div>
If this doesn't work please keep in mind I could not properly test it.