@guardian/src-grid v2.8.2
Grid
š£ For more context and visual guides relating grid usage on the Source Design System website
Install
$ yarn add @guardian/src-grid
Use
import { GridRow, GridItem } from "@guardian/src-grid"
const Article = () => (
<GridRow breakpoints={["mobile", "tablet", "desktop", "leftCol", "wide"]}>
<GridItem span={[0, 3, 3, 4, 4]} borderRight={true}>
<Sidebar />
</GridItem>
<GridItem span={[4, 9, 9, 10, 12]}>
<Main />
</GridItem>
</GridRow>
)
GridRow
Props
breakpoints
Array<GridBreakpoint | CustomBreakpoint>
= "mobile", "tablet", "desktop", "leftCol", "wide"
A list of breakpoints at which grid column span may change. GridRow currently
supports changes at "mobile"
, "tablet"
, "desktop"
, "leftCol"
and "wide"
breakpoints.
Any of these may be omitted.
For best results, breakpoints should be ordered ascending by minimum viewport width.
A custom breakpoint may be specified, which must have the following properties:
width
: the minimum viewport width at which the breakpoint becomes active. This will also be the width of theGridRow
containercolumns
: the number of columns the grid should comprise
GridItem
Props
span
number[]
The number of columns a grid item should span. Corresponds to the breakpoints
list
in GridRow
props.
When a col span of 0 is specified for a particular breakpoint, the grid item will have
display: none
applied to it.
borderRight
boolean
= false
Whether a border should appear to the right of the grid item.
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago