Use spacer components

Instead of trying find a generic abstraction for Layout in React, I think the easiest solution is to use a <Flex /> and a <Grid /> component that mostly mirror their CSS APIs, with one small addition: the <Flex /> component ponyfills flex-gap to allow for spacing defined from the parent (Margin considered harmful):

<Flex gap={3} justifyContent="column">

I find working with this component a pleasant experience, particularly when combined with strict-ui.

A common response I get to Margin considered harmful is that they “just pass in margin via a className prop on the children”, however Do not allow arbitrary CSS to be passed into your components.