CSS minmax 无效属性值

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 minmax() notation requires proper syntax.

That could be said about most CSS properties, except in this case, due to the many options and variations, the syntax is a bit complex and not so easy to understand. In other words, it's relatively easy to create an invalid rule.

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

Answer 2

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max.

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)