css - 如何创建网格元素的 1 和半 fr 宽度

Question

我正在尝试制作这个组件:

component image

这是我的网格元素的 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>

如何像上图那样改变最后一项的宽度？

Answer 1

正如其他人提到的，最好将网格划分为更多列，这样可以让您拥有更灵活的布局，这里我制作了一个 6 列网格，并仅告诉最后 2 个元素根据根据您的图像添加到您需要的空间。

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 15px;
}

.grid-item {
  border: 1px solid black;
}

.item1,
.item2,
.item3,
.item4 {
  grid-column: span 3;
}

.item5 {
  grid-column: span 4
}

.item6 {
  grid-column: span 2
}

<div class="grid">
  <div class="grid-item item1">
  </div>
  <div class="grid-item item2">
  </div>
  <div class="grid-item item3">
  </div>
  <div class="grid-item item4">
  </div>
  <div class="grid-item item5">
  </div>
  <div class="grid-item item6">
  </div>
</div>