如何为Grid布局的Pane设置独立宽度以匹配原布局效果？

我需要为Grid布局里的每个列（即panes）设置独立的width，因为每个pane都有onClick事件，能触发宽度缩小或放大，示例写法如下：

${navbar ? "col-w-[5vw]" : "col-w-[20vw]"}

原布局代码（期望的效果基准）：

<div className="grid h-screen grid-cols-[20vw_20vw_20vw_100vw] overflow-x-scroll">
  <div className="overflow-x-hidden overflow-y-scroll bg-yellow-400 text-50xl">PANE*1*Lorem ipsum</div>
  <div className="overflow-x-hidden overflow-y-scroll bg-green-500 text-50xl">PANE*2*Lorem ipsum</div>
  <div className="overflow-x-hidden overflow-y-scroll bg-blue-300 text-50xl">PANE*3*Lorem ipsum</div>
  <div className="text-50xl">
    <main>*MAIN*Lorem ipsum</main>
  </div>
</div>

我尝试改写成下面的形式，但实际效果和原布局不符：

<div className="grid h-screen grid-cols-4 overflow-x-scroll">
  <div className="col-w-[20vw] overflow-x-hidden overflow-y-scroll">PANE*1*Lorem ipsum</div>
  <div className="col-w-[20vw] overflow-x-hidden overflow-y-scroll">PANE*2*Lorem ipsum</div>
  <div className="col-w-[20vw] overflow-x-hidden overflow-y-scroll">PANE*3*Lorem ipsum</div>
  <div className="col-w-[100vw] overflow-x-hidden overflow-y-scroll">
    <main>*MAIN*Lorem ipsum</main>
  </div>
</div>

请问该如何正确改写？

内容的提问来源于stack exchange，提问作者Boq7