# Grid Column

Set the size & position of items across grid columns.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 57 · Edge 16 · Firefox 52 · Safari 10.1

| Class | Properties | Value |
|-------|------------|-------|
| `gc-s:1` | grid-column | `span 1 / span 1` |
| `gc-s:2` | grid-column | `span 2 / span 2` |
| `gc-s:3` | grid-column | `span 3 / span 3` |
| `gc-s:4` | grid-column | `span 4 / span 4` |
| `gc-s:5` | grid-column | `span 5 / span 5` |
| `gc-s:6` | grid-column | `span 6 / span 6` |
| `gc-s:7` | grid-column | `span 7 / span 7` |
| `gc-s:8` | grid-column | `span 8 / span 8` |
| `gc-s:9` | grid-column | `span 9 / span 9` |
| `gc-s:10` | grid-column | `span 10 / span 10` |
| `gc-s:11` | grid-column | `span 11 / span 11` |
| `gc-s:12` | grid-column | `span 12 / span 12` |
| `gc-s:13` | grid-column | `span 13 / span 13` |
| `gc-s:14` | grid-column | `span 14 / span 14` |
| `gc-s:15` | grid-column | `span 15 / span 15` |
| `gc-s:16` | grid-column | `span 16 / span 16` |

## Grid Column End

| Class | Properties | Value |
|-------|------------|-------|
| `gce:1` | grid-column-end | `1` |
| `gce:2` | grid-column-end | `2` |
| `gce:3` | grid-column-end | `3` |
| `gce:4` | grid-column-end | `4` |
| `gce:5` | grid-column-end | `5` |
| `gce:6` | grid-column-end | `6` |
| `gce:7` | grid-column-end | `7` |
| `gce:8` | grid-column-end | `8` |
| `gce:9` | grid-column-end | `9` |
| `gce:10` | grid-column-end | `10` |
| `gce:11` | grid-column-end | `11` |
| `gce:12` | grid-column-end | `12` |
| `gce:13` | grid-column-end | `13` |
| `gce:14` | grid-column-end | `14` |
| `gce:15` | grid-column-end | `15` |
| `gce:16` | grid-column-end | `16` |

## Grid Column Start

| Class | Properties | Value |
|-------|------------|-------|
| `gcs:1` | grid-column-start | `1` |
| `gcs:2` | grid-column-start | `2` |
| `gcs:3` | grid-column-start | `3` |
| `gcs:4` | grid-column-start | `4` |
| `gcs:5` | grid-column-start | `5` |
| `gcs:6` | grid-column-start | `6` |
| `gcs:7` | grid-column-start | `7` |
| `gcs:8` | grid-column-start | `8` |
| `gcs:9` | grid-column-start | `9` |
| `gcs:10` | grid-column-start | `10` |
| `gcs:11` | grid-column-start | `11` |
| `gcs:12` | grid-column-start | `12` |
| `gcs:13` | grid-column-start | `13` |
| `gcs:14` | grid-column-start | `14` |
| `gcs:15` | grid-column-start | `15` |
| `gcs:16` | grid-column-start | `16` |

## Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `gc-s:1` | grid-column | `span 1 / span 1` |
| `gc-s:2` | grid-column | `span 2 / span 2` |
| `gc-s:3` | grid-column | `span 3 / span 3` |
| `gc-s:4` | grid-column | `span 4 / span 4` |
| `gc-s:5` | grid-column | `span 5 / span 5` |
| `gc-s:6` | grid-column | `span 6 / span 6` |
| `gc-s:7` | grid-column | `span 7 / span 7` |
| `gc-s:8` | grid-column | `span 8 / span 8` |
| `gc-s:9` | grid-column | `span 9 / span 9` |
| `gc-s:10` | grid-column | `span 10 / span 10` |
| `gc-s:11` | grid-column | `span 11 / span 11` |
| `gc-s:12` | grid-column | `span 12 / span 12` |
| `gc-s:13` | grid-column | `span 13 / span 13` |
| `gc-s:14` | grid-column | `span 14 / span 14` |
| `gc-s:15` | grid-column | `span 15 / span 15` |
| `gc-s:16` | grid-column | `span 16 / span 16` |

## Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `gc-s:1` | grid-column | `span 1 / span 1` |
| `gc-s:2` | grid-column | `span 2 / span 2` |
| `gc-s:3` | grid-column | `span 3 / span 3` |
| `gc-s:4` | grid-column | `span 4 / span 4` |
| `gc-s:5` | grid-column | `span 5 / span 5` |
| `gc-s:6` | grid-column | `span 6 / span 6` |
| `gc-s:7` | grid-column | `span 7 / span 7` |
| `gc-s:8` | grid-column | `span 8 / span 8` |
| `gc-s:9` | grid-column | `span 9 / span 9` |
| `gc-s:10` | grid-column | `span 10 / span 10` |
| `gc-s:11` | grid-column | `span 11 / span 11` |
| `gc-s:12` | grid-column | `span 12 / span 12` |
| `gc-s:13` | grid-column | `span 13 / span 13` |
| `gc-s:14` | grid-column | `span 14 / span 14` |
| `gc-s:15` | grid-column | `span 15 / span 15` |
| `gc-s:16` | grid-column | `span 16 / span 16` |