4

Есть ли способ в grid системе запретить перенос элементов?

body{
  margin:0;
}

.list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0 30px;
}

.item {
  width: 100%;
  background: pink;
  min-height: 100px;
}
<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

</div>

Можно ли добиться что б на новый элемент (в примере 5-й) добавлялся горизонтальный сролл, а не проиходил перенос ?

2
  • Я с телефона и не могу проверить, можно попробовать задать списку min-width: max-content
    – user355286
    1 фев 2020 в 21:44
  • А, и пятый элемент всегда будет на новой строке, так как там repeat 4
    – user355286
    1 фев 2020 в 21:46

1 ответ 1

7

Такого эффекта можно достичь, используя grid-auto-columns

    body{
        margin:0;
    }

    .list {
        min-width: 100%;
        display: grid;
        grid-gap: 0 30px;
        grid-auto-columns: calc(25% - 30px);
        grid-auto-flow: column;
    }

    .item {
        width: 100%;
        background: pink;
        min-height: 100px;
    }
<div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>

</div>

Ваш ответ

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

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