<Composition/>. Any layout piece is a combination of its counterparts, whether it's an entire page or a small button. You can apply this principle throughout the entire application and remain consistent in the way your components are declared.
Albumcomponent that will represent our UI element.
Compositioncomponents from the
atomic-layoutpackage at the top of your
Composition areas are verbal representation of layout areas, sensitive to their position in space and relation to each other.
areasMobilethat will hold a description of our areas on mobile screens.
areasMobilevariable is just a string. In order for it to be used as a blueprint for a layout composition, we need to pass it as a value to the
areasprop of the
Pay attention that all children (area components) are wrapped in
<></>). This is necessary because CSS Grid currently affects only direct children, so must make sure area components are direct children of the
gapprop (that aliases
grid-gap: 10px;in the generated styles.