Отзывчивая горизонтальная прокрутка CSS Grid с фиксированным количеством элементов сетки на точку останова

Question

Вопрос: CODEPEN

Как я могу спроектировать сетку с использованием CSS Grid, чтобы сделать карусель, в которой элементы сетки реагируют на фиксированное числостолбцы сетки, которые будут варьироваться в зависимости от точки останова?

ПРОБЛЕМА: Элементы сетки не масштабируются должным образомна отзывчивых контрольных точках.Максимальное количество элементов сетки не указывается.

Пожалуйста, ознакомьтесь с видео о том, как я хочу, чтобы элементы сетки масштабировались на точку останова: https://imgur.com/070Zwve

Фон

Я задал предыдущий вопрос о том, как я могу заставить элементы сетки перемещаться горизонтально с помощью сетки CSS:

Контейнер CSS сетки, который прокручивается горизонтальнокогда дети используют grid-столбец?

В конце я получил код, который работал для рабочего стола, но не для каких-либо других точек останова:

CSS:

.section {
  width: 100%;
  display: block;
  background: red;
  box-sizing: border-box;
  padding: 40px 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    background: orange;
    padding: 56px 48px;
  }

  @media screen and (min-width: 1140px) {
    padding: 64px 48px;
    background: green;
  }
}

.container {
  margin: 0 auto;
  background: rgba(244,244,244, .25);
  max-width: 599px;


  @media screen and (min-width: 600px) and (max-width: 1139px) {
    max-width: 1039px;
    background: rgba(244,244,244, .25);
  }

  @media screen and (min-width: 1140px) {
    max-width: 1032px;
    background: rgba(244,244,244, .25);
  }
}

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  grid-auto-columns: minmax(55px, 1fr);
  grid-gap: 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px)  {
    grid-auto-columns: minmax(44px, 1fr);
    grid-gap: 48px;
  }

  @media screen and (min-width: 1140px) {
    grid-auto-columns: minmax(42px, 1fr);
    grid-gap: 48px;
  }
}


.element {
  display: grid;
  background: rgba(0,0,0,.3);
  grid-column: span 3;
  grid-row-start: 2; // REMOVE THIS

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    grid-column: span 3;
  }

  @media screen and (min-width: 1140px) {
    grid-column: span 4;
  }
}
.element img {
  width: 100%;
}

HTML:

<section class="section">
  <div class="container">
    <div class="samba-grid">
 <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>
      <div class="element">
        <img src="https://placebear.com/400/500" alt="">
        <div class="copy">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
        </div>
      </div>

    </div>


  </div>
</section>

^ обратите внимание, это видео показывает, что стек элементов сетки в строках не прокручивается по горизонтали.

Answer 1

Вы можете определить grid-auto-columns в процентах, чтобы контролировать это. Формула должна быть (100% - (N-1)*Gap)/N, где N - номер элемента, который вы хотите показать:

Вот упрощенный пример с 3 точками останова:

.grid {
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns:calc((100% - 2*10px)/3); /*3 items visible*/
  grid-gap:10px;
  margin:10px;
  max-width:800px;
  overflow:auto;
}
img {
  max-width:100%;
}

@media all and (max-width:800px) {
.grid {
  grid-auto-columns:calc((100% - 5px)/2); /*two items visible*/
  grid-gap:5px;
 }
}

@media all and (max-width:400px) {
.grid {
  grid-auto-columns:100%; /*one item visible*/
  grid-gap:5px;
 }
}

<div class="grid">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
 <img src="https://picsum.photos/500/500?image=0">
</div>