JSFiddle - React, Tailwind, and code Playground

HTML

Grid with 2 columns:
<div class="grid col2">
  <div class="item"></div>
</div>
Grid with 3 columns:
<div class="grid col3">
  <div class="item"></div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-auto-columns: 0;
  width: 200px;
}
.grid.col2 > .item {
  grid-column: span 2;
}
.grid.col3 > .item {
  grid-column: span 3;
}
.item::before, .item::after {
  content: '';
  float: left;
  width: 50px;
}

JavaScript

for (let grid of document.querySelectorAll('.grid')) {
	grid.before(getComputedStyle(grid).gridTemplateColumns);
}