The fundamental building block.
Only display prop is unique to the Box component.
The following props are shared between Box, Container, Flex, Grid, and Section layout components.
This component is based on the div element and also supports common margin props m, mx, my, ml, mr, mt, mb. View source
Use the display prop to specify the layout behaviour. You can change it across breakpoints using the object syntax.
We do not plan to create a component that combines block, flex, and grid display values, as this usually leads to messy layouts. Sensibly composing Box, Flex, and Grid components is the key to creating even the most complex responsive layouts.
Use the position, inset, top, bottom, left, and right props to create positioned elements. You can also change these values across breakpoints using the object syntax.
The position offset props don’t support space scale values like "1", "2", "3", … , encouraging the separation of layout concerns. Use margin and padding props to achieve a similar result.
Use the width and height props to specify the Box size.
As usual, the numerical values "1", "2", "3", … , correspond to the space scale steps.
Use the shrink and grow props to control the size of elements in a flex container.