1

Нужно расположить элементы в ряд. Как это можно реализовать через grid при условии, что кол-во элементов не известно. Или может есть другие решения?

В данном примере я использовал repeat()

.slider {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(9, 500px);
}

.slider .slide {
  min-width: 200px;
  text-align: center;
  margin: 50px;
}

.slider .slide img {
  display: block;
  width: 300px;
}
<div class="slider">
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
</div>

1
  • 1
    grid-auto-flow: column;
    – xydope
    4 сен 2020 в 16:17

1 ответ 1

1

.slider {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 50px;
}

.slider .slide img {
  width: 300px;
  display: block;
}
<div class="slider">
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
  <div class="slide"><img src='https://cdnimg.rg.ru/img/content/178/19/90/los_1000_d_850.jpg'></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.