Css 如何创建网格项的1.5倍fr宽度

我正在尝试制作此组件：

这是我的css代码，用于此网格项：

#flight-tab {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

这是我的html结构：

  <div id="flight-tab">
    <div class="tab-box bg-white d-flex align-items-center text-left">
      <div>
        <svg class="sprite-icon">
          <use :xlink:href="`${sprite}#location`"></use>
        </svg>
      </div>
      <div>
        <div class="title font-weight-bold">From</div>
        <div class="subtitle">Tehran (THR)</div>
      </div>
    </div>

    <div class="tab-box bg-white d-flex align-items-center text-left">
      <div>
        <svg class="sprite-icon">
          <use :xlink:href="`${sprite}#flag`"></use>
        </svg>
      </div>
      <div>
        <div class="title font-weight-bold">To</div>
        <div class="subtitle">Isfahan (IFN)</div>
      </div>
    </div>

    <div class="tab-box bg-white d-flex align-items-center text-left">
      <div>
        <svg class="sprite-icon">
          <use :xlink:href="`${sprite}#calendar`"></use>
        </svg>
      </div>
      <div>
        <div class="title font-weight-bold">Departure Date</div>
        <div class="subtitle">18 March 2019</div>
      </div>
    </div>

    <div class="tab-box bg-white d-flex align-items-center text-left">
      <div>
        <svg class="sprite-icon">
          <use :xlink:href="`${sprite}#calendar`"></use>
        </svg>
      </div>
      <div>
        <div class="title font-weight-bold">One Way</div>
        <div class="subtitle">No Return</div>
      </div>
    </div>

    <div class="tab-box bg-white d-flex align-items-center text-left">
      <div>
        <svg class="sprite-icon">
          <use :xlink:href="`${sprite}#user`"></use>
        </svg>
      </div>
      <div>
        <div class="title font-weight-bold">Passengers</div>
        <div class="subtitle">2 Adult | 1 Child | 0 Infant</div>
      </div>
    </div>

    <div>
      <button type="submit" class="search-btn">Search Now</button>
    </div>
  </div>

从…起
德黑兰（THR）
到
伊斯法罕（IFN）
离港日
2019年3月18日
单行线
不归
乘客
2名成人| 1名儿童| 0名婴儿
现在搜索

---

如何更改上图中最后一个项目的宽度？正如其他人所提到的，最好将网格划分为更多列，这样可以使布局更灵活，这里我制作了一个6列网格，并告诉最后2个项目根据图像所需的空间进行分配

.grid{
显示：网格；
网格模板列：重复（6，1fr）；
网格自动行：最小最大值（100px，自动）；
间隙：15px；
}
.表格项目{
边框：1px纯黑；
}
.项目1，
.项目2，
.项目3，
.项目4{
格构柱：跨度3；
}
.项目5{
格构柱：跨度4
}
.项目6{
格构柱：跨度2
}

---

正如其他人所提到的，最好将网格划分为更多的列，这样可以使布局更灵活，这里我制作了一个6列网格，并告诉最后2项根据图像所需的空间进行分布

.grid{
显示：网格；
网格模板列：重复（6，1fr）；
网格自动行：最小最大值（100px，自动）；
间隙：15px；
}
.表格项目{
边框：1px纯黑；
}
.项目1，
.项目2，
.项目3，
.项目4{
格构柱：跨度3；
}
.项目5{
格构柱：跨度4
}
.项目6{
格构柱：跨度2
}

设为4列或6列，没有0.5fr；）如上所述，创建一个6柱格线。50%的项目将跨越第1-3/3-6列。将较长的项目跨列1-4。将其设为4列或6列，没有0.5fr；）如上所述，创建一个6柱格线。50%的项目将跨越第1-3/3-6列。使较长的项目跨越第1-4列。