html - 如何在固定大小的网格列之间设置灵活的网格列间隙？

Question

我有一个三列两行的布局——列的大小应该是固定的，但我希望grid-column-gap列之间的大小是响应式的，但不低于最小大小。我尝试使用类似以下的东西，但minmax似乎在这里不起作用（我的 IDE 也将其标记为不好的用法）。感谢您提供任何线索！

.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};
    }
  }


}

标签： htmlcsssasscss-grid