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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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