@govuk-react/grid-col

GridCol component for use inside GridRow component - includes media query breakpoints.

Stats

StarsIssuesVersionUpdatedCreatedSize
@govuk-react/grid-col
0.9.115 days ago4 years agoMinified + gzip package size for @govuk-react/grid-col in KB

Readme

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)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.