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

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

The `grid-template-columns` property defines the column track sizes of a CSS grid container. When the W3C validator reports that a particular value "is not a `grid-template-columns` value," it means the parser encountered something it cannot interpret as a valid track size or track listing.

This error can be triggered by many common mistakes: a simple typo (like `auто` instead of `auto`), using a CSS custom property (the validator may not resolve `var()` references), forgetting units on a length value (e.g., `100` instead of `100px`), using JavaScript-like terms (e.g., `undefined` or `null`), or using newer syntax that the validator's CSS parser doesn't yet support.

While browsers are generally forgiving and will simply ignore an invalid `grid-template-columns` declaration, this means your grid layout silently breaks — the container won't form a grid as intended, and content may stack in a single column. Fixing validation errors ensures your layout works predictably across browsers and makes your stylesheets easier to maintain.

### Valid values

The `grid-template-columns` property accepts these value types:

- **`none`** — the default; no explicit grid columns are defined.
- **Length and percentage values** — `px`, `em`, `rem`, `%`, `vh`, `vw`, etc. (e.g., `200px`, `50%`).
- **The `fr` unit** — distributes remaining space proportionally (e.g., `1fr 2fr`).
- **Keywords** — `auto`, `min-content`, `max-content`.
- **The `repeat()` function** — shorthand for repeated track patterns (e.g., `repeat(3, 1fr)`).
- **The `minmax()` function** — sets a minimum and maximum size for a track (e.g., `minmax(150px, 1fr)`).
- **The `fit-content()` function** — clamps the track to a given maximum (e.g., `fit-content(300px)`).
- **Named grid lines** — defined with square brackets (e.g., `[sidebar-start] 200px [sidebar-end content-start] 1fr [content-end]`).
- **Any combination of the above.**

### Common causes

1. **Typos or made-up keywords** — values like `undefined`, `inherit-grid`, or misspelled units.
2. **Missing units** — writing `100` instead of `100px`. The `fr` unit, `px`, and all other units are mandatory (only `0` can be unitless).
3. **Invalid function syntax** — missing commas or parentheses in `repeat()` or `minmax()`.
4. **CSS custom properties** — `var(--cols)` may trigger validator warnings because the validator cannot resolve the variable at parse time. This is typically a false positive.

## Examples

### Incorrect: invalid keyword

```html
<style>
  .grid {
    display: grid;
    grid-template-columns: undefined;
  }
</style>
```

### Incorrect: missing unit on a length

```html
<style>
  .grid {
    display: grid;
    grid-template-columns: 200 1fr;
  }
</style>
```

### Incorrect: malformed `repeat()` syntax

```html
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3 1fr);
  }
</style>
```

### Correct: using `fr` units

```html
<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
</style>
```

### Correct: mixing lengths, `fr`, and `auto`

```html
<style>
  .grid {
    display: grid;
    grid-template-columns: 250px 1fr auto;
  }
</style>
```

### Correct: using `repeat()` and `minmax()`

```html
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
</style>
```

### Correct: named grid lines with track sizes

```html
<style>
  .grid {
    display: grid;
    grid-template-columns: [sidebar] 240px [content] 1fr [aside] 200px;
  }
</style>
```

If the validator flags a `var()` custom property usage and you're confident the variable resolves to a valid value at runtime, the warning can generally be disregarded — this is a known limitation of static CSS validation. For all other cases, double-check spellings, ensure every numeric value (other than `0`) has a unit, and verify that function syntax includes the correct commas and parentheses.