I have multiple DIVs (the DIVs can be generated from an array, so I don't know the number of DIVs beforehand) of different widths. I'm using flexbox with flex-wrap to order them like so:
.outercontainer { border: 1px solid blue; width: 400px;}.container { display: flex; flex-wrap: wrap; gap: 5px;}.wide { width: 200px;}.normal { width: 100px;}.item { border: 1px solid red; height: 30px;}https://codepen.io/pandaquests/pen/RNbGNLd
This all looks good except there is a space on the right hand side:
Ideally it should look like this (space on the left and right of the whole block is equal):
Is there a way to center the whole block? I tried justify-content:center, but this would center the last two elements as well. I tried grid with grid-auto-flow: row dense; but that would make the items overlap:
.outercontainer { border: 1px solid blue; width: 400px;}.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-flow: row dense; grid-column: span 2;}.wide { width: 200px; background: pink;}.normal { width: 100px;}.item { border: 1px solid red; height: 30px;}https://codepen.io/pandaquests/pen/pvzEvPE
I tried to prevent this using grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); and auto-fit (instead of auto-fill), and grid-column:span 2 it still doesn't work.