# 2nd Edition: Please Mind The Gap

DevFeed: [2nd Edition: Please Mind The Gap](<https://devfeed.tech/articles/2nd-edition-please-mind-the-gap-31226.md>)

Original publisher: [Read original article](<https://every-layout.dev/blog/second-edition/>)

Author: Heydon Pickering

Published: 2021-06-29T00:00:00Z

Content type: release

Language: en

Sources: [The Every Layout Blog](<https://devfeed.tech/sources/the-every-layout-blog.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [components](<https://devfeed.tech/tags/components.md>), [flexbox](<https://devfeed.tech/tags/flexbox.md>), [margin](<https://devfeed.tech/tags/margin.md>), [markup](<https://devfeed.tech/tags/markup.md>), [properties](<https://devfeed.tech/tags/properties.md>), [release](<https://devfeed.tech/tags/release.md>)

## AI overview

Every Layout announces its second edition, which focuses on the CSS gap property and its Flexbox support in modern browsers. The article explains how gap can simplify responsive layout components compared with margin-based techniques, reducing intermediary markup and problems with custom properties and nesting.

## Source excerpt

We at Every Layout (try to imagine we have some sort of corporate identity rather than being two blokes with a neat website and a script that generates epubs) are proud to announce the release of our second edition! And we are slashing the already low price of $69 down to just $40 to mark the occasion. Just make sure you use 2ND_COMING at checkout ASAP; we can't keep it at that price forever. What's new, then? This edition is all about the gap property, which is now supported with Flexbox in all modern browsers. Why is gap important? Smart layout primitives like the Cluster, Sidebar, and Switcher are all designed to automatically reconfigure themselves to suit different contexts--and without needing JavaScript or @media queries. When doing this, gutters (margins) between elements can be problematic unless handled carefully. A margin applied to one element to create a gap between it and an adjacent element becomes a misplaced margin when the element wraps: Until now, we have solved this by applying margin to child elements symmetrically (to all sides) and using negative margin to deal with the excess. There's nothing wrong with using negative margins per se; it's more a technique than a hack. But this approach does necessitate what we have come to call an intermediary wrapper... <div class="component"> <div> <!-- <- intermediary wrapper with negative margin --> <div>Child 1</div> <div>Child 2</div> </div> </div> What this does is insulate the negative margin from the flow of the document. Then we can apply a sensible margin to the outer component itself. In fact, it's more likely this margin would be applied by a parent Stack element, which injects margin between successive elements (Every Layout components are highly modular and composable). Not only does the negative margin technique represent additional markup, but things start to go awry when it comes to custom properties and nesting. Margins are applied to child elements and child elements become parent elements whe