4 ms·
When the components in a grid have different heights, a single longer or shorter component stretches the whole row or leaves unpleasant whitespace at the bottom
by e-oj 8y ago
When the components in a grid have different heights, a single longer or shorter component stretches the whole row or leaves unpleasant whitespace at the bottom.
- zanny 8y agoYou can use auto-flow: dense to have the grid backfill gaps. I haven't had much chance to test its limits cross browser yet though but trivial examples have worked for me so far. It isn't as optimal a layout system as you can get with javascript but generally so long as all elements are at least half the height of other members of a row it doesn't look offensively bad. And there is room for more sophisticated layout algorithms in the future. And it generally isn't that hard to pad grid items to be multiples of a common height so they can organically fill consistently.