The breakpoint range determines the number of columns, gutter width and margin width for a predetermined set of screen sizes.
Prop | Screensize | Margins | Gutters | Columns |
---|---|---|---|---|
small | ≤767 px | 16 px | 16 px | 12 |
medium | ≥768 px | 24 px | 24 px | 12 |
large | ≥1024 px | 24 px | 24 px | 12 |
xLarge | ≥1440 px | 24 px | 24 px | 12 |
This breakpoint range covers all desktop and tablet use cases with margins and gutters set at 24px.
<Container>
<Row>
<Column
large={12}
medium={12}
xLarge={12}
/>
</Row>
<Row>
<Column
large={6}
medium={6}
small={6}
xLarge={6}
/>
<Column
large={6}
medium={6}
small={6}
xLarge={6}
/>
</Row>
<Row>
<Column
large={4}
medium={4}
small={4}
xLarge={4}
/>
<Column
large={4}
medium={4}
small={4}
xLarge={4}
/>
<Column
large={4}
medium={4}
small={4}
xLarge={4}
/>
</Row>
<Row>
<Column
large={3}
medium={3}
small={3}
xLarge={3}
/>
<Column
large={3}
medium={3}
small={3}
xLarge={3}
/>
<Column
large={3}
medium={3}
small={3}
xLarge={3}
/>
<Column
large={3}
medium={3}
small={3}
xLarge={3}
/>
</Row>
<Row>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
</Row>
<Row>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
</Row>
</Container>
This breakpoint range covers all mobile use cases with margins and gutters set at 16px. The following are a couple of the most common mobile configurations.
<Container>
<Row>
<Column
large={12}
medium={12}
xLarge={12}
/>
</Row>
<Row>
<Column
large={6}
medium={6}
small={6}
xLarge={6}
/>
<Column
large={6}
medium={6}
small={6}
xLarge={6}
/>
</Row>
</Container>
This depicts how the grid behaves at resolutions greater than 1440px.
<Container>
<Row>
<Column
large={12}
medium={12}
xLarge={12}
/>
</Row>
<Row>
<Column
large={6}
medium={6}
small={6}
xLarge={6}
/>
<Column
large={6}
medium={6}
small={6}
xLarge={6}
/>
</Row>
<Row>
<Column
large={4}
medium={4}
small={4}
xLarge={4}
/>
<Column
large={4}
medium={4}
small={4}
xLarge={4}
/>
<Column
large={4}
medium={4}
small={4}
xLarge={4}
/>
</Row>
<Row>
<Column
large={3}
medium={3}
small={3}
xLarge={3}
/>
<Column
large={3}
medium={3}
small={3}
xLarge={3}
/>
<Column
large={3}
medium={3}
small={3}
xLarge={3}
/>
<Column
large={3}
medium={3}
small={3}
xLarge={3}
/>
</Row>
<Row>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
<Column
large={2}
medium={2}
small={2}
xLarge={2}
/>
</Row>
<Row>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
<Column
large={1}
medium={1}
small={1}
xLarge={1}
/>
</Row>
</Container>