I finally made it, using a mix of media queries, css variables and css grid. I still do not understand what are the calculations made by the browser tho.

From what I know it should be, in the instance of a grid: nbOfColumnscolumnSize+gapSize(nbOfColumns-1).

Since I'm using fixed units, I made sure that in all cases, the content would have all the space it requires to not have columns being stretched.

However, I noticed for some reasons, multiple of 4 set as width would work for actual equal columns. As per the gap, I used the technique from this post and used the border trick.

You could see it coming all together, if I was not too lazy to read how to include code with a jsfiddle link. So much annoyance maybe this works, knowing the domain is jsfiddle. coolnamesaregone/dc8t61nb/4/

So this is now more or less solved. I would really like to have some insight on why both the gaps were not equal and on why columns were squashed. This would help me better this. Who knows, in 7 months I'll be able to answer it myself.