title: How can I set a flexible grid-column-gap between fixed-size grid columns?
body: <p>I've got a layout with three columns and two rows -- the columns should be a fixed size, but I'd the <code>grid-column-gap</code> between the columns to be responsive but not go below a minimum size.  I tried to use something like the following, but <code>minmax</code> doesn't seem to work here (my IDE flags it as a bad usage too).  Thanks for any clues!</p>
  
  <pre><code>.mainGrid-main {
    max-width: $max-width;
    width: $max-width;
    grid-column-gap: minmax(76px, 1fr);
    grid-row-gap: 89px;
    margin: 50px auto;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, $cardWidth);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: '0 1 2' '3 4 5';
  
    $areas: 0, 1, 2, 3, 4, 5;
  
    @each $area in $areas {
      .mainGrid--card-#{$area} {
        grid-area: #{$area};
      }
    }
  
  
  }
  </code></pre>