HTML Guides for grid-template-columns

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

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

Incorrect: missing unit on a length

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

Incorrect: malformed repeat() syntax

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

Correct: using fr units

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

Correct: mixing lengths, fr, and auto

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

Correct: using repeat() and minmax()

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

Correct: named grid lines with track sizes

<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.