Как сделать scroll элементов в grid сетке?

Question

Имеется Grid сетка в которую мы динамически добавляем элементы ( от 1 до 31 в зависимости от месяца и даты). Я хочу чтобы при количестве элементов больше X значения появлялся их скролл, а не перенос на новую строку. Как мне это реализовать? ( Я знаю что можно сделать через Javascript добавив кнопки по бокам для скролла, но может есть способы обойтись и без него? )

Answer 1

Если я правильно понял задачу, ты можно сделать так. Использовал flexbox, но можете поменять на grid

.line {
  position: relative;
  border: 1px solid #ececec;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: 10px 0;
  height: 100px;
  padding:0;
}

.line.example1 {width: 275px;}
.line.example2 {width: 100%;}

.wrapper {
  position: absolute;
}

ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin:0;
  padding:0;
}

ul li {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 0 0 1px;
}

.line.example1 li {background-color: silver}
.line.example2 li {background-color: lightgreen}

<div class="line example1">
  <div class="wrapper">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

<div class="line example2">
  <div class="wrapper">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

БЛОГ НА HUSL

Как сделать scroll элементов в grid сетке?

Ответы (1 шт):