JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="grid">
  <div class="col"><span class="stick-to-top">Col 1</span></div>
  <div class="col"><span class="stick-to-top">Col 2</span></div>
  <div class="col"><span class="stick-to-top">Col 3</span></div>
  <div class="col"><span class="stick-to-top">Col 4</span></div>
  <div class="col"><span class="stick-to-top">Col 5</span></div>
  <div class="col"><span class="stick-to-top">Col 6</span></div>
  <div class="col"><span class="stick-to-top">Col 7</span></div>
  <div class="col"><span class="stick-to-top">Col 8</span></div>
  <div class="col"><span class="stick-to-top">Col 9</span></div>
  <div class="col"><span class="stick-to-top">Col...

CSS

:root {
  --col-width: 10rem;
}
body {
  width: fit-content;
  outline: 3px dashed fuchsia;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--col-width));
  grid-auto-flow: column;
  grid-auto-columns: var(--col-width);

}

.col {
  border-right: 1px solid gray;
  height: 30rem;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}

.stick-to-top {
  position: sticky;
  top: 10px;
}

p {
  display: block;
}