如何不使用relative/absolute定位实现Grid网格内元素底部定位

• 需求：为Grid网格容器内的每个元素添加名称标识，不使用常规absolute/relative定位方案，将名称文本定位在对应网格项的底部位置
• 异常现象：当前class为det1的p标签仅在第一个网格元素中效果符合预期，将该p标签结构复制到其他所有class为gr1的a标签内时，页面布局出现错乱

CSS部分 #

.body {
  position: fixed;
  width: 100%;
  height: 85vh;
  top: 18%;
  border: 2px solid green;
  overflow: auto;
}

.gr1 {
  width: 100%;
  height: 100%;
  border: 2px solid yellow;
}

.gr1 img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
}

.con1 {
  width: 100%;
  height: 75%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

HTML部分 #

<div class="con1">
  <a href="" class="gr1">
    <img SRC="onion.jpg" alt="">
    <p class="det1">onion</p>
  </a>
  <a href="" class="gr1">
    <img src="carrot.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="grapes.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="strawberry.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="tomatoes.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="pepper.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="apples.jpg" alt="">
  </a>
</div>

布局错乱的核心原因：当前.gr1 img设置了height: 100%，当网格项内新增p标签后，img和p两个块级元素会共同排列，img占满100%网格项高度后，会把p标签挤出容器，直接打乱整体网格排版。

不需要使用绝对/相对定位，直接将每个.gr1网格项设为弹性布局或嵌套网格布局，即可实现文本固定在底部的效果，修改逻辑如下：

• 调整.gr1为纵向弹性容器，让内部元素按垂直方向排列
• 修改图片高度规则，让图片自动占满除文本外的所有剩余空间，避免溢出
• 给.det1清除默认段落边距，设置基础展示样式

修改后的CSS代码：

.gr1 {
  /* 保留原有width、height、border样式，追加以下属性 */
  display: flex;
  flex-direction: column;
}

.gr1 img {
  /* 移除原有height:100%属性，替换为以下内容 */
  flex: 1;
  height: auto;
  min-height: 0; /* 解决flex布局下媒体元素默认溢出问题 */
  /* 原有width、margin、object-fit、object-position属性保留 */
}

.det1 {
  margin: 0;
  padding: 6px 0;
  text-align: center;
  /* 可按需自定义文字颜色、背景样式 */
  color: #fff;
  background: rgba(0,0,0,0.6);
}

修改完成后，将<p class="det1">对应食材名称</p>复制到所有.gr1标签内即可，所有名称文本会自动固定在对应网格项底部，不会打乱原有网格布局。

如果偏好使用Grid语法实现，也可以给.gr1设置display: grid; grid-template-rows: 1fr auto;，效果和弹性布局方案完全一致，同样不需要用到定位属性。

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