CSS minmax invalid property value

Question

I want to set the minmax property for my grid-template-columns. But for some reason I don't get it to work.

Here's my code:

.start {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    grid-template-rows: auto;
    grid-gap: 2%;
}

<div class="start">
  <div class="news"></div>
  <div class="video"></div>
</div>

When I inspect the .start class in Chrome, it just says "invalid property value" for the minmax attribute.

I just want a two-column layout which becomes a one-column layout when the viewport gets to narrow.

Answer 1

I think this is what you're after:

grid-template-columns: repeat(2, minmax(320px, 1fr));

For smaller screens, where you want one column, use a media query to run this:

grid-template-columns: 1fr;

---

The proper syntax for minmax() is detailed in the chart below (taken from the spec).

Notice that there is no option for minmax() followed by another minmax() in the track lists. That's why your rule is invalid.

Here's the complete explanation:

• 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties