fit-content()

grid-template-columns: fit-content(8ch) fit-content(8ch) 1fr;

grid-template-columns: fit-content(100px) fit-content(100px) 1fr;

grid-template-columns: fit-content(40%) fit-content(40%) 1fr;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One この列には多めのテキストが入っています。</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 250px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  text-align: left;
}

/* <length> 値 */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* <percentage> 値 */
fit-content(40%)

<div id="container">
  <div>コンテンツの幅のアイテム。</div>
  <div>
    テキストが多いアイテムです。コンテンツが最大幅より広いため、 300 ピクセルで固定されています。
  </div>
  <div>柔軟なアイテム</div>
</div>

#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}