3 ms·
Grid gap is a killer feature for dynamic layout. It allows you to place items in a container and have them wrap dynamically when there's not enough space in the
by lewisl9029 7y ago
Grid gap is a killer feature for dynamic layout. It allows you to place items in a container and have them wrap dynamically when there's not enough space in the container, _with consistent spacing between the wrapped lines_.
Using raw flexbox you'd have to resort to hacks with negative margins on the container (https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped https://stackoverflow.com/questions/30887071/margin-top-only...), which often affects layout of the container in unpredictable ways, making it less than ideal for building reusable layout abstractions.
A popular alternative is to resort to screen size media queries to set margins, but screen size doesn't always match whatever container you have to render content in, so you end up with very brittle layouts that need all their media queries adjusted when you move containers around and add elements that constrain the dimensions of the container like sidebars (or even worse, collapsible sidebars that change width dynamically).