你能幫我知道如何在第三列的末尾加一個句子嗎？第三列本身有兩個內(nèi)列，但我想在第三列的末尾加上句子的全寬，而不是其中一個內(nèi)列。我認為這應(yīng)該很簡單，但我找不到一個可行的方法。

.main-container {
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  margin: auto;
  padding-inline-start: 100px;
  padding-inline-end: 74px;
  gap: 82px;
}

.column:last-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

<div class="main-container">
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </div>

  <div class="column">
    <div class="inner-column">
      <h2 class="fh22">Quick Access</h2>
      <Link to="/pages/Home" class="fqaccess fhome">
      Home
      </Link>
    </div>
    <div class="inner-column">
      <h2 class="fh22">Helpful Links</h2>
      <a href="#" class="fqaccess fhome">
        Link 1
      </a>
    </div>

  </div>

第三列使用兩列網(wǎng)格布局，因此需要底部內(nèi)容的包含元素使用grid-column: span 2跨越兩列。

(你也少了一個& lt/div & gt；標(biāo)簽。)

.main-container {
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  margin: auto;
  padding-inline-start: 100px;
  padding-inline-end: 74px;
  gap: 82px;
}

.column:last-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.bottom {grid-column: span 2}

<div class="main-container">
  <div class="column">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="column">
    <div class="inner-column">
      <h2 class="fh22">Quick Access</h2>
      <Link to="/pages/Home" class="fqaccess fhome">
        Home
      </Link>
    </div>
    <div class="inner-column">
      <h2 class="fh22">Helpful Links</h2>
      <a href="#" class="fqaccess fhome">
        Link 1
      </a>
    </div>
    <div class="bottom">
      This text spans both columns
    </div>
  </div>
</div>