JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<h3>grid-template-columns: 50px repeat(auto-fit, minmax(calc((100% - 100px)/6), 1fr)) 50px;</h3>	
<div class="container opt1">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item8">Item 8 - 50px</div>
</div>

<h3><strike>grid-template-columns: 50px repeat(auto-fit, minmax(0, 1fr)) 50px;</strike></h3>	
<div class="container opt2">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item4">Item 8 - 1fr</div>
  <div class="item5">Item 9 - 1fr</div>
  <div class="item6">Item 10 - 1fr</div>
  <div class="item7">Item 11 - 1fr</div>
  <div class="item8">Item 12 - 50px</div>
</div>

<h3><strike>grid-template-columns: 50px repeat(auto-fit, 1fr) 50px;</strike></h3>	
<div class="container opt3">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item7">Item 4 - 1fr</div>
  <div class="item8">Item 5 - 50px</div>
</div>

CSS

body{
  font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
h3{
  margin:40px 0 20px 0;
  font-size:1.6em;
  text-align:center;
}
.container{
  background:peru;
  padding:10px;
  display:grid;
}

.container div{
  background:#f0ff00;
  margin:5px;
  padding:5px;
  text-align: center;
  color:#333333;
}

.container.opt1{grid-template-columns: 50px repeat(auto-fit, minmax(calc((100% - 100px)/6), 1fr)) 50px;}
.container.opt2{grid-template-columns: 50px repeat(auto-fit, minmax(0, 1fr)) 50px;}
.container.opt3{grid-template-columns: 50px repeat(auto-fit, 1fr) 50px;}

JavaScript

Array.from(document.querySelectorAll('.container')).forEach(c => c.style.gridTemplateColumns = '50px repeat(auto-fit, minmax(calc((100% - 100px)/' + (c.childElementCount - 2) + '), 1fr)) 50px');