Firefox	Safari	Chrome
v63	v14.1	v84

LYTS uses the CSS gap property for spacing, as well as other quite modern CSS features such as the min(), and minmax() functions. These are now supported by the vast majority of users, but that may still be a deal-breaker if you need to support older browsers.

Alternatives

A different approach the one LYTS uses is the negative margin technique, as described in Every Layout's "The Cluster". This achieves the same effect as using native gap, but with better browser support. But this approach also has drawbacks:

• Every layout component has to render 2 container elements
• Implementing bleeding via negative margins is only possible with another (3rd) wrapper element
• You can't pass string children to components (must be wrapped in e.g. <span>)

Layout components may be used quite heavily, which can lead to lots of DOM elements on a page. The gap property is now reasonably well supported in browsers, so the trade-off has been made to rely on it.

One alternative to LYTS which uses the negative-margin technique is Every Layout. They provide Web Components, but their documentation can also be helpful to implement it yourself. Another alternative is Quantargo's React Layout, which also uses the negative-margin technique (written by the same author as LYTS, Christian Kaindl), but is not actively maintained so not recommended.