JSFiddle - React, Tailwind, and code Playground

HTML

<div class='content'>
  <div class='left'></div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='right'></div>
</div>

CSS

.content {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  grid-auto-rows: 50px;  
  grid-gap: 10px;
}

.column-with-dynamic-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12%, 1fr));
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-column: 2 / 3;
}

.left {
  grid-column-start: 1;
  grid-row: 2 / 3 ;
}

.right {
  grid-column-end: -1;
  grid-row: 2 / 3 ;
}

/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray;  border: 1px solid gray; }