# CSS: “grid-column”: X is not a “grid-column” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-grid-column-x-is-not-a-grid-column-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `grid-column` property is a shorthand for `grid-column-start` and `grid-column-end`. It defines where a grid item is placed horizontally within a CSS Grid layout. The validator checks that inline `style` attributes and `<style>` blocks contain valid CSS, and it will flag any value that doesn't conform to the property's grammar.

## Why This Happens

Several kinds of invalid values can trigger this error:

- **Using `0` as a line number.** CSS Grid lines are 1-indexed. Line `0` does not exist, so values like `grid-column: 0`, `grid-column: 0 / 3`, or `grid-column: span 0` are all invalid.
- **Typos or unrecognized keywords.** Values like `grid-column: center` or `grid-column: full` are not valid unless they match named grid lines you've explicitly defined.
- **Malformed shorthand syntax.** Missing the `/` separator, using commas instead, or providing too many values will cause a parse error.
- **Using `span` incorrectly.** The `span` keyword must be followed by a positive integer or a named line, e.g., `span 2`. Writing `span -1` or `span 0` is invalid.

## Valid Syntax

The `grid-column` shorthand accepts:

```css
grid-column: <grid-line> / <grid-line>;
```

Each `<grid-line>` can be:

- A **positive or negative integer** (but not `0`) representing a grid line number
- A **named grid line** (e.g., `content-start`)
- The `span` keyword followed by a positive integer or a name (e.g., `span 2`)
- `auto`

If only one value is provided (no `/`), the end line defaults to `auto`.

## Why It Matters

Invalid CSS values are ignored by browsers, meaning the grid item will fall back to automatic placement. This can cause unexpected layout shifts. Ensuring valid values improves standards compliance, makes your layout predictable across browsers, and prevents silent failures that are hard to debug.

## Examples

### ❌ Invalid: Using `0` as a line number

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 0 / 3;">Item</div>
</div>
```

Grid lines start at `1`, so `0` is not a valid line number.

### ✅ Fixed: Using a valid line number

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 1 / 3;">Item</div>
</div>
```

### ❌ Invalid: Unrecognized keyword

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: full;">Item</div>
</div>
```

The value `full` is not a valid grid line value unless it's a named line defined in the grid template.

### ✅ Fixed: Using `span` to cover all columns

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 1 / -1;">Item</div>
</div>
```

Using `-1` refers to the last grid line, effectively spanning all columns.

### ❌ Invalid: `span 0`

```html
<div style="display: grid; grid-template-columns: repeat(4, 1fr);">
  <div style="grid-column: span 0;">Item</div>
</div>
```

The `span` keyword requires a positive integer. `0` is not valid.

### ✅ Fixed: Using a positive span value

```html
<div style="display: grid; grid-template-columns: repeat(4, 1fr);">
  <div style="grid-column: span 2;">Item</div>
</div>
```

### ❌ Invalid: Malformed syntax with a comma

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 1, 3;">Item</div>
</div>
```

### ✅ Fixed: Using the `/` separator

```html
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 1 / 3;">Item</div>
</div>
```

The start and end lines must be separated by a `/`, not a comma.

## Quick Reference of Valid Patterns

| Value | Meaning |
|---|---|
| `grid-column: 2` | Start at line 2, end at auto |
| `grid-column: 2 / 5` | Start at line 2, end at line 5 |
| `grid-column: 1 / -1` | Span from first to last line |
| `grid-column: span 3` | Span 3 columns from auto-placed start |
| `grid-column: 2 / span 3` | Start at line 2, span 3 columns |
| `grid-column: auto / auto` | Fully automatic placement |

When in doubt, check that every numeric value is a non-zero integer and that the overall format uses `/` to separate the start and end values.