如何在含双inner-column的第三列末尾添加全宽语句？

给你两个可行的实现方案，基于你现有代码修改，简单直接：

方案一：利用grid-column跨列（最推荐） #

这种方法不用修改原有双列布局模板，只需要给新增元素加一行CSS即可实现全宽效果：

1. 修改HTML：在第三列的两个inner-column后新增你需要的文本元素，比如添加一个带full-width-footer类的容器
2. 添加CSS：给这个容器设置跨列属性，让它占满整个第三列宽度

修改后的完整代码 #

CSS代码

.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);
  gap: 20px; /* 可选：给两个inner-column之间添加间距 */
}

.full-width-footer {
  grid-column: 1 / -1; /* 从第一列跨到最后一列，占满整个宽度 */
  margin-top: 20px; /* 可选：和上方内容拉开距离 */
}

HTML代码

<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="full-width-footer">这是占满第三列完整宽度的语句</div>
  </div>
</div>

原理说明：grid-column: 1 / -1是Grid布局的跨列语法，-1代表网格容器的最后一列，因此该元素会直接横跨整个第三列的宽度，完美匹配你的需求。

方案二：通过命名网格区域实现（适合精细布局控制） #

如果你需要对布局区域有更明确的定义，可以用命名网格区域的方式，把第三列分成两行：第一行双列，第二行单列。

修改后的CSS代码 #

.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;
  /* 定义网格区域：第一行是col1和col2，第二行是full */
  grid-template-areas: 
    "col1 col2"
    "full full";
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.inner-column:first-child {
  grid-area: col1; /* 对应网格区域col1 */
}

.inner-column:last-child {
  grid-area: col2; /* 对应网格区域col2 */
}

.full-width-footer {
  grid-area: full; /* 对应网格区域full，占满整行 */
  margin-top: 20px;
}

HTML代码和方案一一致，只需保留新增的full-width-footer元素即可。

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