Flexbox margins in a grid [duplicate]

Question

I have a grid in flexbox, like so:

They're all positioned using flexbox, and then the panels themselves (the coloured bits) have margin: 5px.

codepen here: https://codepen.io/callumacrae/pen/bRoZdp

Because the top right section has two elements, there's more margin there, so it's pushing down slightly—I don't want this to happen!

I guess the two possible fixes are either to make the margins not do that, or make the components five pixels smaller instead of five pixels larger like they are right now - but I don't know how to do either of those things.

How can I make adding more elements not change the size of the parent?

Answer 1

The main problem is that you are sizing the elements using flex-grow. flex-grow is not the right property as it, together with flex-shrink is used to distribute the space left (or if to little).

You should use flex-basis, because as soon as you start fill these empty boxes with content, and their content will differ in size, they will misalign even more.

Here is an updated version of yours, where I changed to style="flex-basis: calc(50% - 10px);" (the 10px is to make up for your margins).

• Codepen with flex-basis

And here is a version of yours, with the same text I used in mine

• Codepen with flex-grow