The grid system is a set of components that can be used to create different layouts, composed of 12 vertical tracks of equal width.
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11amount of vertical tracks that the column should be offset by
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12amount of vertical tracks that the column should span
The grid system is composed of 12 vertical tracks of equal width. Content can be placed in these tracks by using the
Columns can occupy more than one vertical track, by changing the
span prop to a number between 1 and 12.
Columns can be given an offset, by changing the
offset prop to a number between 0 and 11.
Column components can be used to create different kinds of layouts, combining them with other components of the design system.
This other example, shows how to create a two
Column layout with a number of stacking