HTML中如何使用Grid布局在网格列下方添加对应说明文本

直接调整网格项的内部结构即可，不需要改动外层Grid的列配置，具体修改如下：

修改思路 #

• 把原来每个直接放在.grid下的div，替换为包含「展示卡片+描述文本」的容器组，让每个网格项对应一组「卡片+文本」
• 外层Grid的行高改为自适应，保证可以容纳卡片和下方的文本高度
• 固定展示卡片的高度为你原需求的240px，文本区域自然跟随在卡片下方

完整代码 #

CSS代码 #

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* 行高改为自适应，容纳卡片+文本 */
  grid-auto-rows: auto;
  row-gap: 43px;
  column-gap:24px;
}
/* 每个网格项内的卡片固定高度 */
.grid-card{
  height: 240px;
  border: 1px solid black;
}
/* 卡片下方的文本样式，可自行调整边距 */
.grid-desc{
  margin-top: 8px;
  font-size: 14px;
}

HTML代码 #

<div class="grid">
  <!-- 第一组卡片+文本 -->
  <div class="grid-item">
    <div class="grid-card">item1</div>
    <p class="grid-desc">对应文本1</p>
  </div>
  <div class="grid-item">
    <div class="grid-card">item2</div>
    <p class="grid-desc">对应文本2</p>
  </div>
  <div class="grid-item">
    <div class="grid-card">item3</div>
    <p class="grid-desc">对应文本3</p>
  </div>
  <div class="grid-item">
    <div class="grid-card">item4</div>
    <p class="grid-desc">对应文本4</p>
  </div>
  <!-- 第二组卡片+文本 -->
  <div class="grid-item">
    <div class="grid-card">item5</div>
    <p class="grid-desc">对应文本5</p>
  </div>
  <div class="grid-item">
    <div class="grid-card">item6</div>
    <p class="grid-desc">对应文本6</p>
  </div>
  <div class="grid-item">
    <div class="grid-card">item7</div>
    <p class="grid-desc">对应文本7</p>
  </div>
  <div class="grid-item">
    <div class="grid-card">item8</div>
    <p class="grid-desc">对应文本8</p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Andrea Demitri Seferi