The Container component adds an outer padding and centers itself horizontally in the viewport.
We have two sizes of the container, wide (12 columns) and narrow (10 columns).
We use a 12-column grid with 8/24/24/24px gutter width. The maximum colum width is 94px. Always place columns directly inside rows. Each column has a span and offset. The defaults are 12 and 0, respectively.
The span and offset can differ at each breakpoint range:
When using a two column layout, the gutter between the two columns must be slightly larger
than the standard grid gutter. In these cases use the TwoColumn, TwoColumnL, and TwoColumnR
components instead of Row and Column.
We use three breakpoints (480, 800, 1100), which gives us four breakpoint ranges:
In the source code, when we have something that changes across the breakpoint ranges, we use
the Responsive<T> type:
The materials/responsive module also provides other convenient functions to deal with
responsiveness.
mqFeatures and mqUse whichever is more convenient when defining CSS that is dependent on the breakpoint range.
The following pixes sizes are available as constants: spNNN, where NNN is the zero-padded
pixel number: 5, 10, 15, 20, 25, 40, 60, 80.
Use the Space component to add space around elements. Use any CSS property as the prop name.
The value of the prop should be of type Responsive<T>.
You can actually use the Space component to set any CSS property, not just spacing-related ones
(for example <Space color={{ xs: "green", s: "blue", … }}>). But please don't.