CSS сетка с минимум двумя столбцами - PullRequest
Новая
       32

CSS сетка с минимум двумя столбцами

1 голос
/ 27 апреля 2020

Я пытаюсь сделать так, чтобы минимальный столбец составлял 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;
  }
}

1 Ответ

0 голосов
/ 27 апреля 2020

Вместо этого: 

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));

Теперь всегда есть как минимум два столбца.

...