<div class="grid">
  <div data-css="1fr">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et tenetur beatae tempora doloremque cum id sunt ipsum totam quaerat iste! Dignissimos perferendis aliquam officiis iusto repudiandae iste quisquam, quasi exercitationem.</div>
  <div data-css="minmax(50px, 100px)">a</div>
  <div data-css="20%">a</div>
  <div data-css="auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur unde iste fuga dolores doloribus, soluta explicabo sed eligendi amet alias voluptatum tempora, cum labore ex commodi nulla nisi neque saepe?</div>
</div>

<div class="grid">
  <div data-css="1fr">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et tenetur beatae tempora doloremque cum id sunt ipsum totam quaerat iste! Dignissimos perferendis aliquam officiis iusto repudiandae iste quisquam, quasi exercitationem.</div>
  <div data-css="minmax(50px, 100px)"> dolor sit amet consectetur adipisicing elit. Pariatur unde iste fuga dolores doloribus, soluta explicabo sed eligendi amet alias voluptatum tempora, cum labore ex commodi nulla nisi neque saepe?a</div>
  <div data-css="20%">a</div>
  <div data-css="auto">Lorem ipsum</div>
</div>

<div class="grid">
  <div data-css="1fr">a</div>
  <div data-css="minmax(50px, 100px)">a</div>
  <div data-css="20%">a</div>
  <div data-css="auto">a</div>
</div>

<div class="grid">
  <div data-css="1fr">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et tenetur beatae tempora doloremque cum id sunt ipsum totam quaerat iste! Dignissimos perferendis aliquam officiis iusto repudiandae iste quisquam, quasi exercitationem.</div>
  <div data-css="minmax(50px, 100px)">a</div>
  <div data-css="20%">a</div>
  <div data-css="auto">a</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr minmax(50px, 100px) 20% auto;
  grid-gap: 20px;
  margin: 0 0 50px 0;
}
.grid > div {
  background: lightblue;
  position: relative;
  padding: 0.5rem;
  min-height:40px;
}
.grid > div::before {
  content: attr(data-css);
  display:block;
  position:absolute;
  background: green;
  padding: 0.2rem;
  bottom:30px;
  right:0;
  font-size: .6rem;
  white-space:nowrap;
}
.width {
  position: absolute;
  bottom: 0;
  right: 0;
  background: red;
  padding: 0.5rem;
  font-weight: bold;
  font-size: .79rem;
}

const divs = document.querySelectorAll(".grid > div");
window.addEventListener("resize", () => {
  addWidths();
});
const addWidths = () => {
  [].forEach.call(divs, function(div) {
    var w = document.createElement("div");
    w.classList.add("width");
    w.innerHTML = div.offsetWidth + "px";
    div.append(w);
  });
}
addWidths();