JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="https://almego.ecoonline.net/css/dist/aoo.min.css?v=r4LakQ6z4jnn1NKOpd6G-Jho0nrPmkYW_qo8jIifjF4">
<div class="container-my-5 px-5">
  <div class="d-grid grid-template-name-here">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
    <div class="child">Item 5</div>
    <div class="child">Item 6</div>
    <div class="child">Item 7</div>
    <div class="child">Item 8 is a bit longer<br></div>
  </div>
</div>

CSS

.grid-template-name-here {
  grid-template-columns: 5rem minmax(10rem, 30rem) 1fr max-content;
  grid-template-rows: 1fr 4fr;
  gap: .5rem;
}

.child {
  border: 1px solid fuchsia;
}