Introduction
The grid aims for visual consistency between layouts and to provide flexibility across a wide variety of designs.
...
Anatomy
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.
...
Usage
Fluid grids use columns that scale and resize content. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically. For basic grid column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.
...
To control space between children, use the spacing prop. The spacing value can be any positive number, including decimals and any string. The prop is converted into a CSS property using the theme.spacing() helper.
Props
Props of the Button base component are also available.
...
Name
...
Control
...
Description
...
children
...
Text
...
className
...
Set string
...
container
...
Set boolean
...
item
...
Set boolean
...
spacing
...
Set number
...
rowSpacing
...
Set number
...
columnSpacing
...
Set number
...
xxs
...
Choose option...1 2 3 4 5 6 7 8 9 10 11 12
...
xs
...
Choose option...1 2 3 4 5 6 7 8 9 10 11 12
...
sm
...
Choose option...1 2 3 4 5 6 7 8 9 10 11 12
...
md
...
Choose option...1 2 3 4 5 6 7 8 9 10 11 12
...
lg
...
Choose option...1 2 3 4 5 6 7 8 9 10 11 12
...
xl
...
Choose option...1 2 3 4 5 6 7 8 9 10 11 12
...
columns
...
Choose option...1 2 3 4 5 6 7 8 9 10 11 12
...
wrap
...
wrap
nowrap
wrap-reverse
...
direction
...
row
column-reverse
column
row-reverse