Grid

Fractional based grid contains one-whole, halves, thirds, quarters, fifths, sixths, eighths, tenths, twelfths.

Responsive layouts

The fractions can be configured to apply at specific breakpoints.

BreakpointMinimum width
default0px
xs480px
ss600px
sm720px
md960px
lg1200px
xl1400px
xxl1800px

Equal height columns

Use the equalHeight prop to align GridItems.

Alignment

Use verticalAlign to customise how the items sit alongside each other.

Use horizontalAlign to customise where the items are positioned inside the row.

Position offset

Use offsetLeft and offsetRight to push a GridItem in either direction by a fraction value.


Was this page helpful?