Grid auto flow column in slider - css

Question

Trying to implement slider with grid items, using grid layout and grid-auto-flow: column;
Issue that I am having is that grid with column option, does not see my container with, as I would predict it should see, thus last item is show partially.
My goal is to allways show full items in grid container, and overflow: hide other items.
Is it possible using grid?
https://codepen.io/evelina-rim/pen/gOaLQEq
.container {
border: 10px solid red;
background-color: grey;
width: 700px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(300px, 1fr);
grid-column-end: 1
}
.item {
background-color: coral;
border: 3px solid blue;
}
<div class="container">
<div class="item">Vienas</div>
<div class="item">Du</div>
<div class="item">Trys</div>
<div class="item">Keturi</div>
<div class="item">Penki</div>
</div>

Answer 1

Use percentage value to control this and you can decide how many item you want to show and this will define the width of your items:
.container {
border: 10px solid red;
background-color: grey;
width: 700px;
display: grid;
grid-gap: 20px;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2*20px)/3); /* don't forget to consider the gap */
}
.item {
background-color: coral;
border: 3px solid blue;
}
<div class="container">
<div class="item">Vienas</div>
<div class="item">Du</div>
<div class="item">Trys</div>
<div class="item">Keturi</div>
<div class="item">Penki</div>
</div>
It can be easier using CSS variables
.container {
--n:2;
border: 10px solid red;
background-color: grey;
width: 700px;
display: grid;
grid-gap: 20px;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--n) - 1)*20px)/var(--n)); /* don't forget to consider the gap */
}
.item {
background-color: coral;
border: 3px solid blue;
}
<div class="container">
<div class="item">Vienas</div>
<div class="item">Du</div>
<div class="item">Trys</div>
<div class="item">Keturi</div>
<div class="item">Penki</div>
</div>
<div class="container" style="--n:4">
<div class="item">Vienas</div>
<div class="item">Du</div>
<div class="item">Trys</div>
<div class="item">Keturi</div>
<div class="item">Penki</div>
</div>