...
The grid aims for visual consistency between layouts and to provide flexibility across a wide variety of designs.
...
Our design's responsive UI is based on a 12-column grid layout.
The grid system is implemented with the Grid component. It uses CSS's Flexible Box module for high flexibility.
Item widths are set in percentages, so they're always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are 6 grid breakpoints: xxs, xs, sm, md, lg, xl.
Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the breakpoint constraints.
There are two types of layout: containers and items.
...
| Info |
|---|
When using a responsive columns prop, each grid item needs its corresponding breakpoint. For instance, this is not working. |
...
Container
Если изменения для всего проекта, то досаточно изменитть токен в одном месте, остальные автоматически
‘Container’ component allows to wrap the content and to have that wrapper in one place, so styles won’t be copy-pasted. Using this component maximum width will be limited as well as paddings. It prevents content from “sticking” to the screen.
...
| Info |
|---|
If the changes are needed for entire project, then it is enough to change the token in one place, the rest will be applied automatically. |
...
Section
'Section' component aims to adjust vertical spacings & color themes.
...