JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid" style="--nb-items:9">
  <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 class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

<div class="flex">
  <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 class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

SCSS

@function grid-slider($nbItems_grid: 9, $nbVisibleItems: 4, $gap_grid: 20px) {
  $total-gap: ($nbVisibleItems - 1) * $gap_grid;
  @return repeat($nbItems_grid, calc((100% - #{$total-gap}) / #{$nbVisibleItems}));
}

* {
  box-sizing: border-box;
}


.grid {
  $gap: 20px;
  $nbItems: var(--nb-items);
  padding:10px;
  background: red;
  display: grid;
  gap: $gap;
  grid-template-columns: grid-slider($nbItems_grid: $nbItems, $nbVisibleItems: 2, $gap_grid: $gap);
  overflow: auto;
  @media (min-width: 768px) {
    grid-template-columns: grid-slider($nbItems_grid: $nbItems, $nbVisibleItems: 3, $gap_grid: $gap);
  }

  @media (min-width: 1024px) {
    grid-template-columns: grid-slider($nbItems_grid: $nbItems, $nbVisibleItems: 4, $gap_grid: $gap);
  }
}

.item {
  background: lighten(blue, 20%);
  border: 4px solid blue;
  height: 50px;
}

@function flex-slider($nbVisibleItems, $gap) {
  $total-gap: ($nbVisibleItems - 1) * $gap;
  @return calc((100% - #{$total-gap}) / #{$nbVisibleItems});
}


.flex {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px;
  background: red;

  .item {
    flex: 0 0 flex-slider($nbVisibleItems: 4, $gap: 20px);
  }

  @media (max-width: 1024px) {
    .item {
      flex: 0 0 flex-slider($nbVisibleItems: 3, $gap: 20px);
    }
  }

  @media (max-width: 768px) {
    .item {
      flex: 0 0 flex-slider($nbVisibleItems: 2, $gap: 20px);
    }
  }
}