How can I set the width and max-width of a CSS Grid Column?

Question

Is it possible to limit the width of a CSS grid column?

body {
  margin: 0;
  padding: 0;
}
.container {
    display: grid;
    grid-template-columns: minmax(17.5%, 250px) minmax(31.25%, 480px) auto;
    grid-template-rows: 100vh;
    grid-gap: 0;
}
.menu {
    padding-top: 32px;
    background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
    background-color: #F5F5FC;
}

<div class="container">
  <div class="menu"></div>
  <div class="list-view"></div>
  <div class="details"></div>
</div>

In the example above it always uses 17.5% width for the menu because:

"If max is smaller than min, then max is ignored and the function is treated as min."

source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

What I want is a menu that is 17.5% width with a max of 250px. Is that possible?

Answer 1

One way to do this might be declare:

.container {grid-template-columns: 250px 480px auto;}

as your standard rule.

Then, after considering the narrowest width you would like to apply to your third column, you can apply a @media query.

Let's say you want to ensure your third column is no narrower than 100px.

250px + 480px + 100px = 830px

So you need to write a @media query for 830px:

@media only screen and (max-width: 830px) {

    .container {grid-template-columns: 17.5% 31.25% auto;}
}

Working Example:

body {
  margin: 0;
  padding: 0;
}

.container {
    display: grid;
    grid-template-columns: 250px 480px auto;
    grid-template-rows: 100vh;
    grid-gap: 0;
}

.menu {
    padding-top: 32px;
    background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}

.list-view {
    background-color: #F5F5FC;
}

@media only screen and (max-width: 830px) {
    
    .container {grid-template-columns: 17.5% 31.25% auto;}
}

<div class="container">
  <div class="menu"></div>
  <div class="list-view"></div>
  <div class="details"></div>
</div>