JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div id="grid">
    <div id="item"></div>
  </div>
</div>

CSS

#wrapper {
  width: 0;
}
#grid {
  display: grid;
  float: left;
  grid-template-columns: minmax(0, 1fr);
  border: solid;
}
#item::before, #item::after {
  content: '';
  float: left;
  height: 50px;
  width: 50px;
}

JavaScript

document.body.prepend("Columns: ", getComputedStyle(grid).gridTemplateColumns)