如何在grid-row和grid-column内对齐文本且不丢失边框效果？

我明白你的困扰——用justify-self和align-self确实能让内容居中，但会导致元素收缩到文本宽度，边框没法铺满单元格；同时直接给每个子元素加边框还会出现重叠的情况。下面给你两个可行的解决方案：

方案一：Flex布局实现内容居中+单侧边框避免重叠 #

这种方法通过让grid子元素变成flex容器来实现内容居中，同时只给子元素添加右侧和底部边框，配合容器的左侧和顶部边框，避免边框重叠：

div.around { width: 490px; margin: 0 auto; }
div.padder { padding: 125px 24px 30px; }
div.size-chart { 
  display: grid; 
  grid-template-columns: repeat(9, 1fr); 
  grid-template-rows: repeat(9, 1fr); 
  border-top: 1px solid #c4c4c4;
  border-left: 1px solid #c4c4c4;
}
.size-chart div { 
  border-right: 1px solid #c4c4c4; 
  border-bottom: 1px solid #c4c4c4;
  /* 用flex实现内容居中，同时元素占满整个grid单元格 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.double-span-col { grid-column: auto / span 2; }
.double-span-row { grid-row: auto / span 2; }
.size-chart div span { font-weight: bold; }
.theader { background: #e2e2e2; }

方案二：Grid Gap+背景色模拟边框（更简洁） #

这种方法利用grid的gap属性，把容器背景设为边框颜色，子元素背景设为白色，视觉上就形成了1px的分隔边框，同时子元素用flex居中内容：

div.around { width: 490px; margin: 0 auto; }
div.padder { padding: 125px 24px 30px; }
div.size-chart { 
  display: grid; 
  grid-template-columns: repeat(9, 1fr); 
  grid-template-rows: repeat(9, 1fr); 
  gap: 1px; /* 这个gap就是边框的宽度 */
  background-color: #c4c4c4; /* 边框颜色 */
}
.size-chart div { 
  background-color: #fff; /* 子元素背景，覆盖容器背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.double-span-col { grid-column: auto / span 2; }
.double-span-row { grid-row: auto / span 2; }
.size-chart div span { font-weight: bold; }
.theader { background: #e2e2e2; }

为什么这两种方法有效？ #

• 放弃justify-self/align-self，改用flex布局在子元素内部居中，这样子元素会自动占满整个grid单元格的空间，边框自然就延伸到单元格边缘了。
• 方案一通过单侧边框配合容器边框，避免了相邻元素边框重叠；方案二则用gap和背景色的组合，从根源上避免了边框重叠的问题，代码更简洁。

你可以根据自己的需求选择其中一种，两种方法都能实现你想要的效果：每个单元格1px边框且不重叠，同时内容在单元格内垂直水平居中。

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