CODEWITHSUNDEEP
htmlcssgridcss-grid
Ic3m4n
Ic3m4n

Reputation: 871

CSS minmax invalid property value

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.

Upvotes: 3

Views: 3863

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371163

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.

enter image description here

Here's the complete explanation:

Upvotes: 4

iamnonso
iamnonso

Reputation: 103

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)

Upvotes: -1

Related Questions