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>