I thought I understood grids enough to build a very basic table. The table would have 3 columns and n-rows; the first row is a header. For the data rows, I would like each row within its own div element.

HTML

... <Removed for brevity>

<div class="t-body">
  <div class="data-group"> <-- I would like this to make inspecting HTML structure easier.
    <div> test </div>
    <div> test2 </div>
    <div> test3 </div>
  </div>
</div>

SCSS

... <Removed for brevity>

.t-body > div {
  display: grid;
  grid-template-columns: 50px 1fr 600px;
}

I thought I could add grid-template-columns and a grid display property on each data-group class to apply the necessary grid requirement. But for some reason it does not create a brand new grid row. Any help understanding how to create this new additional grid below another grid would be very helpful.

Thank you!

If there is a better and elegant way to do it I am open to learning that too. Happy CSS / SCSS!

CodePen: https://codepen.io/dmytrie/pen/bGPojBV

I have recreated the issue using a CodePen instance. I was expecting the CSS defined above and the CodePen to create a new row with the data. However, it starts the data in the next column.