CSS / grid Как запретить перенос элементов на новую строку

Question

Есть ли способ в 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-й) добавлялся горизонтальный сролл, а не проиходил перенос ?

Answer 1

Такого эффекта можно достичь, используя 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>

БЛОГ НА HUSL

CSS / grid Как запретить перенос элементов на новую строку

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