add a sentence at the end of a column that itself has two inner-column

Question

Can you help me know how to add a sentence to the end of the third column? the third column itself has two inner-column but I wanna add the sentence at the end of the third column with its full width, not one of the inner columns. I think it should be simple but I can't find a way that works.

.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>

I tried to add two rows to the last column, first divided to two columns and second not, but it didn't work. I expected it cause a row at the end of the third main column to have a sentence in.

Answer 1

You are using a two-column grid layout for the third column, so you need to have the containing element of the bottom content span both columns with grid-column: span 2.

(You are also missing a </div> tag.)

.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>