WordPress模板开发：CSS实现元素高度自适应最长块的求助

你现在的问题核心是CSS属性加错了位置，align-items: stretch是父容器的控制属性，不是子元素.grid-item-inner的，而且vertical-align对块级元素完全不起作用。下面是具体的解决方法：

1. 给网格父容器设置Flex/Grid布局 #

找到包裹所有.grid-item-inner的父容器（大概率是.cms-cmsservice-grid1），给它加上Flex或Grid布局——这两种布局天生支持子元素自动匹配最高项的高度：

方案一：Flex布局（兼容性更好） #

.cms-cmsservice-grid1 {
  display: flex;
  flex-wrap: wrap; /* 让网格在小屏幕自动换行 */
  gap: 15px; /* 可选，设置网格项之间的间距，按需调整 */
}

方案二：Grid布局（更现代，适合复杂网格） #

.cms-cmsservice-grid1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 自适应列宽，小屏幕自动减少列数 */
  gap: 15px; /* 可选，网格间距 */
}

2. 调整子元素样式 #

删掉.grid-item-inner里固定的min-height，同时可以添加垂直flex布局，方便内部元素对齐：

.cms-cmsservice-grid1 .grid-item-inner {
  background-color: #00257A !important;
  color: #fff !important;
  /* 移除 min-height: 355px; */
  display: flex;
  flex-direction: column; /* 让内部内容垂直排列 */
}

如果网格项里有需要贴在底部的元素（比如按钮、链接），给该元素加margin-top: auto，就能让它自动对齐到底部，不管上方内容多少：

.cms-cmsservice-grid1 .grid-item-inner .btn {
  margin-top: auto;
}

为什么原来的代码无效？ #

• align-items: stretch是父容器的属性，必须加在包含所有网格项的容器上，子元素添加这个属性完全没用；
• vertical-align仅对inline、inline-block类型的元素生效，对块级元素不产生作用；
• 固定min-height只能适配特定屏幕，内容变多就会撑破，导致高度不一致。

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