JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="parent">
  <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>A very long one</div>
    <div>Four</div>
    <div>Five</div>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

CSS

.parent {
  max-width: 100%;
  overflow-x: scroll;
}
.wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(auto, 100px));
  grid-template-rows: 1fr 1fr;
}

.wrapper div {
  background: beige;
}