HTML Guide for grid-template-columns

There’s an invalid value for the grid-template-columns property. According to the CSS Grid Layout Module, the grid-template-columns property is used to define the column structure of a grid container by specifying the size of each column.

Valid values for grid-template-columns include:

• Lengths such as px, em, rem, %, vh, vw, and more (e.g., 100px).
• Fractions using the fr unit, which allocates space in fractions of the available space (e.g., 1fr 2fr).
• The repeat() function (e.g., repeat(3, 1fr)).
• Keywords like auto, min-content, max-content.
• Any combination of the above.

Here’s an example:

Incorrect CSS:

<style>
  .grid-container {
    display: grid;
    grid-template-columns: undefined; /* This will cause an error. */
  }
</style>

Correct CSS:

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* This creates a grid with two columns, the first takes up one fraction and the second two fractions of the available space. */
  }
</style>