Search code examples
csscss-grid

Grid auto flow column in slider

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?

enter image description here

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>

Solution

  • 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>