如何用CSS将段落置于Div底部？附现有CSS代码结构

Got it, let's work through getting that paragraph anchored to the bottom of your divs while keeping your existing grid setup intact. Here are two practical approaches tailored to your current CSS:

方法1：利用margin-top:auto（通用方案） #

This trick works in both grid and flex containers—adding margin-top: auto to your paragraph will push it all the way down to the bottom of its parent container. You just need to add a small custom class for your bottom-aligned text:

/* 新增这个类用于底部对齐的段落 */
.grid-bottom-text {
  margin-top: auto;
  margin-bottom: 0; /* 可选：消除段落默认下边距，和容器底部padding更贴合 */
}

Then apply this class to your paragraph in the HTML:

<div class="grid-left">
  <!-- 其他内容 -->
  <p class="grid-bottom-text">你的段落内容</p>
</div>

This works because in grid layouts, auto margins consume all available space in their direction—so margin-top: auto takes up all the extra space above the paragraph, shoving it to the bottom.

方法2：调整Grid模板行（纯Grid方案） #

If you want to lean fully into grid properties, tweak your grid-template-rows to let the middle section fill up the available space, leaving the last row for your bottom paragraph. For example, update your .sub-grid-container like this:

.sub-grid-container {
  display: inline-grid;
  /* 把中间的auto改成1fr，让它占据所有剩余空间 */
  grid-template-rows: 26px 1fr auto;
  border-bottom: 3px solid #f2f2f2;
  margin-bottom: 8px;
  padding-bottom: 4px;
  padding-top: 3px;
}

For .grid-left and .grid-right (which are grid items inside .grid-container), you can first make them grid containers themselves if they aren't already, then apply the same row template trick:

.grid-left, .grid-right {
  display: grid;
  grid-template-rows: 1fr auto;
  border-bottom: 3px solid #f2f2f2;
  margin-bottom: 8px;
  padding-top:4px;
  padding-bottom:4px;
}

/* 保留.grid-right的原有左侧padding */
.grid-right {
  padding-left: 15px;
}

小提示 #

If you don't see the alignment working right away, add a min-height to your containers (e.g., min-height: 100px) to give them enough vertical space for the paragraph to shift to the bottom.

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