Negotiate Pushing Milestone

    @guardian/src-grid

    2.8.2 • Public • Published

    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 the GridRow container
    • columns: 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.

    Keywords

    none

    Install

    npm i @guardian/src-grid

    DownloadsWeekly Downloads

    72

    Version

    2.8.2

    License

    Apache-2.0

    Unpacked Size

    103 kB

    Total Files

    13

    Last publish

    Collaborators

    • unmesh_malvankar
    • zekehg
    • rtyley
    • dlawes
    • ghaberis
    • jsherbert
    • david.furey.gu
    • tonymccraeguardian
    • jlieb10
    • guardian-developers
    • simonadcock-gu
    • maxspencer
    • akash1810
    • reetta
    • ajwl
    • tomrf1
    • mchv
    • itsibitzi
    • justinpinner
    • jranks123
    • nicl
    • philmcmahon
    • tjmw
    • thaliasilver
    • sndrs
    • sam.hession
    • jfsoul
    • 0x101
    • frankie_hammond
    • aoifemcl15
    • ioanna0
    • mxdvl
    • mark.addis
    • rhysmills
    • jamie-lynch
    • amyhughes-gu
    • oliverlloyd
    • jacobwinch
    • dskamiotis
    • marjank
    • annabeddow
    • fweddi
    • michaelclapham_gnm
    • olly.namey.guardian