至少有两列的 CSS 网格

Question

我正在尝试使最小列是 2 列而不是 1 列，无论屏幕大小如何，但似乎无法正确处理。

https://codepen.io/samfisher123/pen/XWmRYQP

感谢任何帮助！谢谢

<ul class="grid-auto-lg gap-sm">
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
  <li><img class="block width-100%" src="../../../app/assets/img/auto-sized-grid-img-1.svg" alt="placeholder"></li>
</ul>

.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl {
  display: grid;
  grid-gap: var(--gap, 0);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); // auto add new cols
}

.grid-auto-sm { --col-min-width: 10rem; }
.grid-auto-md { --col-min-width: 15rem; }
.grid-auto-lg { --col-min-width: 20rem; }
.grid-auto-xl { --col-min-width: 25rem; }

@include breakpoint(xs) {
  .grid-auto-sm\@xs { --col-min-width: 10rem; }
  .grid-auto-md\@xs { --col-min-width: 15rem; }
  .grid-auto-lg\@xs { --col-min-width: 20rem; }
  .grid-auto-xl\@xs { --col-min-width: 25rem; }
}

@include breakpoint(sm) {
  .grid-auto-sm\@sm { --col-min-width: 10rem; }
  .grid-auto-md\@sm { --col-min-width: 15rem; }
  .grid-auto-lg\@sm { --col-min-width: 20rem; }
  .grid-auto-xl\@sm { --col-min-width: 25rem; }
}

@include breakpoint(md) {
  .grid-auto-sm\@md { --col-min-width: 10rem; }
  .grid-auto-md\@md { --col-min-width: 15rem; }
  .grid-auto-lg\@md { --col-min-width: 20rem; }
  .grid-auto-xl\@md { --col-min-width: 25rem; }
}

@include breakpoint(lg) {
  .grid-auto-sm\@lg { --col-min-width: 10rem; }
  .grid-auto-md\@lg { --col-min-width: 15rem; }
  .grid-auto-lg\@lg { --col-min-width: 20rem; }
  .grid-auto-xl\@lg { --col-min-width: 25rem; }
}

@include breakpoint(xl) {
  .grid-auto-sm\@xl { --col-min-width: 10rem; }
  .grid-auto-md\@xl { --col-min-width: 15rem; }
  .grid-auto-lg\@xl { --col-min-width: 20rem; }
  .grid-auto-xl\@xl { --col-min-width: 25rem; }
}

// make gaps compatible with CodyFrame grid system
[class*="grid-auto-"][class*="gap-xxxxs"], [class*="grid-auto-"][class*="gap-xxxs"], [class*="grid-auto-"][class*="gap-xxs"], [class*="grid-auto-"][class*="gap-xs"], [class*="grid-auto-"][class*="gap-sm"], [class*="grid-auto-"][class*="gap-md"], [class*="grid-auto-"][class*="gap-lg"], [class*="grid-auto-"][class*="gap-xl"], [class*="grid-auto-"][class*="gap-xxl"], [class*="grid-auto-"][class*="gap-xxxl"], [class*="grid-auto-"][class*="gap-xxxxl"], [class*="grid-auto-"][class*="grid-gap-"], [class*="grid-auto-"][class*="flex-gap-"] {
  margin: 0;

  > * {
    margin: 0;
  }
}

Answer 1

而不是这个：

grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr))

试试这样的：

grid-template-columns: 250px repeat(auto-fit, minmax(var(--col-min-width), 1fr));

现在总是至少有两列。