css3 – CSS / grid How to prevent elements from wrapping to a new line

Question:

Is there a way in the grid system to disable item wrapping?

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>

Is it possible to achieve that a horizontal scroll would be added to a new element (in the 5th example), and not a transfer would occur?

Answer:

This effect can be achieved using 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>

Post Views: 38