<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.Album
component that will represent our UI element.Composition
components from the atomic-layout
package at the top of your Album
file:
Composition areas are verbal representation of layout areas, sensitive to their position in space and relation to each other.
areasMobile
that will hold a description of our areas on mobile screens.areasMobile
variable 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 areas
prop of the Composition
component:Pay attention that all children (area components) are wrapped inReact.Fragment
(<></>
). This is necessary because CSS Grid currently affects only direct children, so must make sure area components are direct children of theComposition
.
gap
prop (that aliases grid-gap
CSS property).Propgap={10}
appliesgrid-gap: 10px;
in the generated styles.