With Atomic layout we pursue the goal of improving developer-experience when building layouts. Modern web development has moved a mile from what we've used to. We have sophisticated state management, reactivity, live subscriptions—it feels ridiculous to spend hours on positioning UI elements, or writing media queries manually. Or that it takes insane amount of effort to bring responsiveness to our elements.

Atomic layout is heavily inspired by Atomic design, and grants you a dedicated layer where you can combine your "atoms", small contextless components. That layer is called "composition". Composition is responsible for spacing and position of atoms, making them contextless. This boost reusability and improves maintenance of your React components.

This project also encapsulates best practices such as built-in responsiveness, separation of concerns, and conditional rendering. The best part is that it's built with CSS Grid and encourages to use it through a carefully crafted abstraction.