Getting started

Starting with a new technology may be challenging. We are working hard to make this process as smooth as possible, letting you enjoy the benefits of Atomic layout in your projects. We do not have a goal to make you good at using a library, but to make you experienced with layout principles in general.

This section alone contains a high-level overview of topics to get started with Atomic layout. Bookmark it and let your journey into the future of web layouts begin.

CSS Grid

Atomic layout uses CSS Grid, making your experience with it a crucial part of experience with the library.

Most of the values you would assign to components are according to the CSS Grid specification, so please make sure you are familiar with its fundamentals.

We have prepared a set of useful resources to get you familiar with what CSS Grid is and how to use it. Not only this knowledge will help you to achieve incredible layouts with Atomic layout, but it will also improve your skillset in general.



One of the biggest benefits of Atomic layout is its standardized workflow. Imagine any layout part being declared in the same clear and efficient way. Easy to navigate and maintain.

We have prepared the example-based guide to onboard you to the workflow:


Now is a good time to learn some pillars of Atomic layout. Get familiar with breakpoints, prop aliases and responsive props—essentials to use the library.

Best practices

After you have given it a solid round of practice, it is good to see how others utilize Atomic layout at its best. We have prepared a set of hand-picked pieces of advice and patterns to bring your layouts to the next level.

Got a suggestion to improve this guide? Please create an issue immediately!