@govuk-react/grid-col

    0.9.0 • Public • Published

    GridCol

    Import

      import GridCol from '@govuk-react/grid-col';

    Should always be wrapped by GridRow. Will always render a column at full width if the browser width is below the TABLET breakpoint.

    NB our grid is based on flex-box, which differs from govuk-frontend, which instead uses floats, however it is otherwise similar to use.

    Usage

    Simple

    import { GridRow , GridCol } from 'govuk-react'
    
    <Fragment>
      <GridRow>
        <GridCol>
          ...
        </GridCol>
      </GridRow>
      <GridRow>
        <GridCol setWidth="one-half">
          ...
        </GridCol>
        <GridCol setWidth="one-quarter">
          ...
        </GridCol>
        <GridCol setWidth="one-quarter">
          ...
        </GridCol>
      <GridRow>
        <GridCol setWidth="one-third">
          ...
        </GridCol>
        <GridCol setWidth="two-thirds">
          ...
        </GridCol>
      </GridRow>
      <GridRow>
        <GridCol setWidth="one-third" setDesktopWidth="one-quarter">
          ...
        </GridCol>
        <GridCol setWidth="two-thirds" setDesktopWidth="auto">
          ...
        </GridCol>
      </GridRow>
    </Fragment>

    References:

    Properties

    Prop Required Default Type Description
    children undefined node GridCol content
    columnFull false bool Dimension setting for the column (deprecated)
    columnOneHalf false bool Dimension setting for the column (deprecated)
    columnOneQuarter false bool Dimension setting for the column (deprecated)
    columnOneThird false bool Dimension setting for the column (deprecated)
    columnThreeQuarters false bool Dimension setting for the column (deprecated)
    columnTwoThirds false bool Dimension setting for the column (deprecated)
    setDesktopWidth undefined union(string | number | enum) Explicitly set desktop column to width using value or descriptive string
    (one-quarter, one-third, one-half, two-thirds, three-quarters, full)
    setWidth undefined union(string | number | enum) Explicitly set column to width using value or descriptive string
    (one-quarter, one-third, one-half, two-thirds, three-quarters, full)

    Keywords

    none

    Install

    npm i @govuk-react/grid-col

    DownloadsWeekly Downloads

    3,238

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    93.1 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar