Flexbox Grid Finesse

Excellent piece as usual. You made an undeclared subtle but crucial switch in your final example which reveals the limitations of the technique for a grid system.

You went from

`flex: 1 0 25%;`


`flex: 1 0 auto;`

In your codepens your divs are empty, which allows the browser to happily work out their widths based upon your css flex auto rule. Same if you add content which is fluid (i.e. not replaced elements such as images which have predetermined dimensions). But when you add content with dimensions you start to come a cropper.

I was hoping to use technique for an image gallery layout. Fine if my images are background-images so that the child divs have no native width and the auto flex engine can have at it, but I wanted my images in the HTML rather than the CSS as <img> tags using object-fit: cover but that’s not possible.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.