Grid布局边框异常：为何边框会包裹Button元素？

问题原因 #

你遇到的核心问题是：border-bottom加在了网格子元素（比如.gig-*或按钮）本身的底部，而非网格行的底部。这是因为：

• 容器设置了align-items: end，导致子元素默认靠网格行底部对齐，但子元素自身高度未占满整个网格行，边框自然跟着子元素走；
• 只有.gig-*类加了边框，按钮所在的网格项没有同步添加，导致线条不连贯；
• margin-bottom会拉开子元素和边框的距离，让线条看起来更偏离网格行。

修复方案 #

方案1：给所有网格子项统一添加底部边框（推荐）

这种方法能让整行底部都显示分隔线，不管子元素的对齐方式：

.tour-dates {
  display: grid;
  grid-template-columns: repeat(5, 20%); /* 简化5列写法 */
  grid-template-rows: repeat(7, auto); /* 自适应每行内容高度 */
  margin: 3rem 6.5rem 0; /* 简化margin写法 */
}

/* 给每行的所有子项加底部边框，最后一行可根据需求去掉 */
.tour-dates > *:not(:nth-last-child(-n+2)) { /* 需根据实际HTML结构调整选择器，确保每行子项都被选中 */
  border-bottom: #000 solid 1px;
  padding-bottom: 2rem; /* 用padding代替margin，避免线条和内容脱节 */
}

.tix {
  grid-column: 4/5;
  align-self: start;
  justify-self: end;
}

.rsvp {
  grid-column: 5/6;
  align-self: start;
  justify-self: end;
}

button.tix, button.rsvp {
  padding: 0 2rem; /* 简化内边距写法 */
}

方案2：让子元素占满网格行高度

调整对齐方式，让子元素高度铺满网格行，这样边框就会对齐网格行底部：

.tour-dates {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(7, auto);
  align-items: stretch; /* 强制子元素占满行高 */
  margin: 3rem 6.5rem 0;
}

.gig-0 { /* 所有.gig-*类同理 */
  grid-row: 1/2;
  align-self: end; /* 保持内容靠下显示 */
  border-bottom: #000 solid 1px;
  padding-bottom: 2rem;
}

.tix, .rsvp {
  align-self: start; /* 按钮保持靠上 */
  border-bottom: #000 solid 1px; /* 给按钮所在项也加边框 */
}

button.tix, button.rsvp {
  padding: 0 2rem;
}

额外建议 #

如果你的HTML结构是每行对应一组巡演内容（比如.gig-*、.tix、.rsvp为一行），建议给每行套一个父容器，再用Grid布局，这样分隔线可以直接加在每行容器上，逻辑更清晰。

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