Сетка автопотока колонки в слайдере - PullRequest
Новая
       7

Сетка автопотока колонки в слайдере

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

Попытка реализовать ползунок с элементами сетки, используя макет grid и grid-auto-flow: column;

Проблема, с которой я сталкиваюсь, заключается в том, что опция сетки с колонкой не видит мой контейнер с, как я предсказывал бы, должен видеть, при этом последний элемент показывается частично.

Моя цель - всегда показывать полные элементы в контейнере с сеткой и overflow: hide другие элементы.

Возможно ли использовать сетку?

enter image description here

https://codepen.io/evelina-rim/pen/gOaLQEq

.container {
  border: 10px solid red;
  background-color: grey;
  width: 700px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  grid-column-end: 1
}

.item {
  background-color: coral;
  border: 3px solid blue;
}
<div class="container">
  <div class="item">Vienas</div>
  <div class="item">Du</div>
  <div class="item">Trys</div>
  <div class="item">Keturi</div>
  <div class="item">Penki</div>
</div>

1 Ответ

2 голосов
/ 22 апреля 2020

Используйте процентное значение для управления этим, и вы можете решить, сколько элементов вы хотите показать, и это будет определять ширину ваших элементов: 

.container {
  border: 10px solid red;
  background-color: grey;
  width: 700px;
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2*20px)/3); /* don't forget to consider the gap */
}

.item {
  background-color: coral;
  border: 3px solid blue;
}
<div class="container">
  <div class="item">Vienas</div>
  <div class="item">Du</div>
  <div class="item">Trys</div>
  <div class="item">Keturi</div>
  <div class="item">Penki</div>
</div>

Проще использовать CSS переменные 

.container {
  --n:2;

  border: 10px solid red;
  background-color: grey;
  width: 700px;
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--n) - 1)*20px)/var(--n)); /* don't forget to consider the gap */
}

.item {
  background-color: coral;
  border: 3px solid blue;
}
<div class="container">
  <div class="item">Vienas</div>
  <div class="item">Du</div>
  <div class="item">Trys</div>
  <div class="item">Keturi</div>
  <div class="item">Penki</div>
</div>

<div class="container" style="--n:4">
  <div class="item">Vienas</div>
  <div class="item">Du</div>
  <div class="item">Trys</div>
  <div class="item">Keturi</div>
  <div class="item">Penki</div>
</div>
...