CSS Grid布局下删除p标签文本后列内h1、img元素对齐问题求解

问题根因 #

你当前布局里每个.box是独立的flex垂直容器，元素间距由实际内容高度决定。当某一列的<p>文本变短后，该.box的整体内容高度会小于其他列，而父容器.s2设置了align-items: center，高度更小的.box会整体垂直居中，自然就出现了不同列的标题、图片不对齐的问题。

解决方案 #

你只需要修改几行CSS代码即可实现对齐：

1. 把父容器.s2的align-items从center改为stretch，让所有.box都自动撑满容器的可用高度，保证所有列高度完全一致
2. 把.box的justify-content从center改为space-between，添加上下内边距替代原有margin-top，让内部三个元素在等高的容器内均匀分布
3. 可以额外给<p>所在的容器设置统一最小高度，适配最长文本的高度，双重保险

修改后的完整CSS代码如下：

.s2 {
  height: 50vh;
  color:rgb(0, 0, 0);
  background-color: rgb(231, 226, 226);
  display: grid;
  justify-items:center;
  /* 改align-items为stretch让所有box撑满高度 */
  align-items: stretch;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  line-height: 20px;
  /* 给容器添加上下内边距，避免内容贴边 */
  padding: 40px 20px;
  box-sizing: border-box;
}

.box {
  display: flex;
  flex-direction: column;
  /* 改为space-between让内部元素均匀分布 */
  justify-content: space-between;
  align-items: center;
  width: fit-content;
}

.box a {
  text-decoration: none;
  font-size: 30px;
  margin-bottom: 20px;
}

/* 给p标签设置固定最小高度，可根据实际最长文本的高度调整数值 */
.box .two p {
  min-height: 60px;
  margin: 0;
}

.box img {
  height: 150px;
  margin: 20px auto 0;
  border: 1px black solid;
  border-radius: 20px 20px;
}

修改完成后，无论中间<p>的文本内容多长、是否为空，不同列的标题、文本、图片都会始终保持对齐。

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