HTML check: CSS: “grid-template-rows”: X is not a “grid-template-rows” value.

About This HTML Issue

The grid-template-rows property defines the size of each row in a CSS grid layout. The W3C validator checks that every value in the declaration conforms to the CSS Grid specification. When you see this error, the validator has encountered something it cannot parse as a valid track size.

Common causes of this error include:

Typos or invalid units — writing 100 px (with a space), 100pixels, or 1 fr instead of 1fr.
Using values from other properties — for example, flex, inline, or space-between are not valid row track sizes.
Incorrect function syntax — missing commas in repeat(), providing wrong arguments to minmax(), or using unsupported functions.
Missing units — writing a bare number like 100 instead of 100px (zero is the only number that doesn’t require a unit).
Using newer syntax not yet recognized — some cutting-edge features like subgrid or the masonry value may trigger validation warnings depending on the validator’s supported spec level.

The grid-template-rows property accepts these valid value types:

Length values: 100px, 5em, 10rem, 20vh
Percentages: 50%, 33.3%
Flexible lengths: 1fr, 2fr
Keywords: auto, min-content, max-content, none
Functions: repeat(), minmax(), fit-content()
Named lines: [row-start] 100px [row-end]

This matters for standards compliance and forward compatibility. While browsers may be lenient and ignore invalid values, relying on that behavior can lead to layouts that silently break. Valid CSS ensures your grid behaves predictably across all browsers.

Examples

Incorrect — invalid values

<style>
  /* ERROR: "full" is not a valid track size */
  .grid-a {
    display: grid;
    grid-template-rows: full auto;
  }

  /* ERROR: space between number and unit */
  .grid-b {
    display: grid;
    grid-template-rows: 100 px 200 px;
  }

  /* ERROR: bare number without a unit */
  .grid-c {
    display: grid;
    grid-template-rows: 100 200;
  }

  /* ERROR: missing comma in repeat() */
  .grid-d {
    display: grid;
    grid-template-rows: repeat(3 1fr);
  }
</style>

Correct — valid track sizes

<style>
  /* Fixed pixel heights */
  .grid-a {
    display: grid;
    grid-template-rows: 100px auto;
  }

  /* Flexible units */
  .grid-b {
    display: grid;
    grid-template-rows: 1fr 2fr;
  }

  /* Repeat function with correct syntax */
  .grid-c {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
  }

  /* Minmax with auto */
  .grid-d {
    display: grid;
    grid-template-rows: minmax(100px, 1fr) auto;
  }
</style>

Full working example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Grid template rows example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: 80px minmax(150px, 1fr) auto;
      gap: 8px;
      height: 400px;
    }
    .grid-container > div {
      background: #e0e0e0;
      padding: 16px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div>Row 1 — fixed 80px</div>
    <div>Row 2 — between 150px and 1fr</div>
    <div>Row 3 — auto-sized to content</div>
  </div>
</body>
</html>

Using `fit-content()` and named lines

<style>
  .grid {
    display: grid;
    grid-template-rows: [header] fit-content(100px) [main] 1fr [footer] auto;
  }
</style>

If your value looks correct but the validator still flags it, check whether you’re using a very new CSS feature like subgrid or masonry. These may not yet be recognized by the validator even if some browsers support them. In that case, the warning can be acknowledged while keeping the value intentionally.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Learn more:

MDN Reference

MDN: CSS grid-template-rows

→

Help us improve our guides

Was this guide helpful?