如何实现按钮固定在Grid网格底部，不受内容长度影响？

要实现按钮固定在Grid列底部、列高度自动对齐的效果，无需用position: absolute，通过给卡片容器添加Flex布局即可轻松解决，具体修改如下：

核心修改点 #

• 给每个价格卡片容器设置Flex垂直布局，让内部元素按垂直方向排列
• 给按钮添加margin-top: auto，利用Flex的自动间距特性将按钮推到容器底部

修改后的完整代码 #

CSS #

:root {
  --primary-color: #00605f;
  --secondary-color: #017479;
  --text-dark: #0f172a;
  --text-light: #94a3b8;
  --white: #ffffff;
  --hover-color: #e5e4e2;
  --max-width: 1400px;
}
.canister-a {
  background-color: var(--primary-color);
  color: var(--white);
  max-width: var(--max-width);
  border-radius: 7px;
  padding: 1%;
  margin: 2% auto;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.canister-a .content-d {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "pricing-card-a pricing-card-b pricing-card-c";
}
.price-card-a, .price-card-b, .price-card-c {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 控制内部元素间距，可按需调整 */
}
.price-card-a {
  grid-area: pricing-card-a;
  border-right: 0.1px solid #ffffff;
  padding: 1.5rem;
}
.price-card-b {
  grid-area: pricing-card-b;
  border-right: 0.1px solid #ffffff;
  padding: 1.5rem;
}
.price-card-c {
  grid-area: pricing-card-c;
  padding: 1.5rem;
}
.price-card-a h2,
.price-card-b h2,
.price-card-c h2 {
  color: var(--white);
  font-weight: 400;
  background: var(--secondary-color);
  text-align: center;
  border-radius: 7px;
}
.price-card-a h4,
.price-card-b h4,
.price-card-c h4 {
  color: var(--white);
  font-size: 1.5rem;
}
.price-card-a span,
.price-card-b span,
.price-card-c span {
  margin: 0.2rem;
}
.content-d ul {
  list-style: none;
}
.content-d li {
  line-height: 1.5rem;
  margin-bottom: 10px;
}
.content-d button {
  padding: 0.75rem 2rem;
  outline: 1px solid var(--white);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  background-color: var(--primary-color);
  cursor: pointer;
  border-radius: 7px;
  margin-top: auto; /* 关键：将按钮推到底部 */
}

.content-d button > a {
  text-decoration: none;
  color: var(--white);
}
.content-d button:hover,
.content-d button:focus {
  background: var(--secondary-color);
}

HTML #

<div class="canister-a">
  <div class="content-d">
    <div class="price-card-a">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta ex, vitae elementum magna. Vestibulum cursus turpis non neque mattis scelerisque. Proin pretium justo sit amet nisl accumsan, non scelerisque enim mattis. Nulla facilisi. Donec rutrum tempus erat ut consectetur. Nam eget facilisis ipsum, non condimentum mi. Morbi sed turpis quis urna molestie pretium non non diam. In hac habitasse platea dictumst. Nam ullamcorper venenatis ipsum a euismod. Curabitur congue malesuada leo, at aliquam est interdum sed. Vivamus eget est molestie, mattis dui nec, laoreet quam. Donec a maximus turpis. Donec sit amet libero tortor. Fusce ut massa ut lectus ultricies rhoncus a vitae mauris. Donec at mi ullamcorper, laoreet lectus sed, tempor eros.
       
      <button>
        <a target="_blank" href=" https://wa.me/11111">
          Contact now
        </a>
      </button>
    </div>
    <div class="price-card-b">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta ex, vitae elementum magna. Vestibulum cursus turpis non neque mattis scelerisque. Proin pretium justo sit amet nisl accumsan, non scelerisque enim mattis. Nulla facilisi. Donec rutrum tempus erat ut consectetur. Nam eget facilisis ipsum, non condimentum mi. Morbi sed turpis quis urna molestie pretium non non diam. In hac habitasse platea dictumst. Nam ullamcorper venenatis ipsum a euismod. Curabitur congue malesuada leo, at aliquam est interdum sed. Vivamus eget est molestie, mattis dui nec, laoreet quam. Donec a maximus turpis. Donec sit amet libero tortor. Fusce ut massa ut lectus ultricies rhoncus a vitae mauris. Donec at mi ullamcorper, laoreet lectus sed, tempor eros.

      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sed velit eu nisl vestibulum imperdiet a vitae ante. Curabitur sagittis vitae dui sed luctus. Suspendisse id dui scelerisque, finibus odio viverra, volutpat est. Vestibulum varius, massa eget semper tempus, ipsum velit cursus tortor, non hendrerit purus mi quis diam. Donec non mattis risus, et sodales mauris. Donec mattis quam sed magna dignissim vulputate. Aenean elementum feugiat urna, ullamcorper iaculis ex porta ut. Nullam venenatis euismod erat ac suscipit.
      
      <button>
        <a target="_blank" href=" https://wa.me/111111"
          >Contact now</a
        >
      </button>
    </div>
    <div class="price-card-c">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porta ex, vitae elementum magna. Vestibulum cursus turpis non neque mattis scelerisque. Proin pretium justo sit amet nisl accumsan, non scelerisque enim mattis. Nulla facilisi. Donec rutrum tempus erat ut consectetur. Nam eget facilisis ipsum, non condimentum mi. Morbi sed turpis quis urna molestie pretium non non diam. In hac habitasse platea dictumst. Nam ullamcorper venenatis ipsum a euismod. Curabitur congue malesuada leo, at aliquam est interdum sed. Vivamus eget est molestie, mattis dui nec, laoreet quam. Donec a maximus turpis. Donec sit amet libero tortor. Fusce ut massa ut lectus ultricies rhoncus a vitae mauris. Donec at mi ullamcorper, laoreet lectus sed, tempor eros.

      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sed velit eu nisl vestibulum imperdiet a vitae ante. Curabitur sagittis vitae dui sed luctus. Suspendisse id dui scelerisque, finibus odio viverra, volutpat est. Vestibulum varius, massa eget semper tempus, ipsum velit cursus tortor, non hendrerit purus mi quis diam. Donec non mattis risus, et sodales mauris. Donec mattis quam sed magna dignissim vulputate. Aenean elementum feugiat urna, ullamcorper iaculis ex porta ut. Nullam venenatis euismod erat ac suscipit.
      
      <button>
        <a target="_blank" href=" https://wa.me/111111"
          >Contact now</a
        >
      </button>
    </div>
  </div>
</div>

原理说明 #

• Grid布局默认会让所有列的高度自动匹配最高列的高度，所以三个价格卡片的容器高度天然一致
• 给卡片容器设置display: flex; flex-direction: column;后，内部元素会垂直排列
• margin-top: auto会让按钮自动占据容器顶部到按钮之间的所有可用空间，从而被推到容器底部，不受上面内容长度影响

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