Fixed column gap css

user_14221111 0
Viewed 155

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);
}
css-multicolumn-layout css html
1 Answers

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.

user_133584400
Related