# @slice-and-dice/govuk-react-grid-col

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

Latest version **0.7.1** (published 2021-03-10) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @slice-and-dice/govuk-react-grid-col
pnpm add @slice-and-dice/govuk-react-grid-col
yarn add @slice-and-dice/govuk-react-grid-col
bun add @slice-and-dice/govuk-react-grid-col
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2021-03-10 |
| First published | 2021-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 95.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alasdair McLeay |
| Maintainers | david-kasali, matthew-moles-civica, simon.thomas, davidbrown123, hamza.khaleel, pktw2827, jpry11, paul.burnett |

## Links

- npm: https://www.npmjs.com/package/@slice-and-dice/govuk-react-grid-col
- Homepage: https://github.com/govuk-react/govuk-react/tree/master/components/grid-col
- npm.io page: https://npm.io/package/@slice-and-dice/govuk-react-grid-col

## Dependencies (2)

- [@slice-and-dice/govuk-react-lib](https://npm.io/package/@slice-and-dice/govuk-react-lib.md) ^0.7.2
- [@slice-and-dice/govuk-react-constants](https://npm.io/package/@slice-and-dice/govuk-react-constants.md) ^0.7.2

## Recent versions

- 0.7.1 (latest) — 2021-03-10

## README

GridCol
=======

### Import
```js
  import GridCol from '@govuk-react/grid-col';
```
<!-- STORY -->

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
```jsx
import GridRow from '@govuk-react/grid-row';
import GridCol from '@govuk-react/grid-col';

<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:
- https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_grid_layout.scss
- https://github.com/alphagov/govuk_elements/blob/master/assets/sass/elements/_layout.scss

### 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<br/>(`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<br/>(`one-quarter`, `one-third`, `one-half`, `two-thirds`, `three-quarters`, `full`)

---
_Source: https://npm.io/package/@slice-and-dice/govuk-react-grid-col · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._