CSS Grid技术咨询：如何对齐同一列文本？我用inline-grid布局同行元素

针对你用inline-grid布局表头，想要实现同一列文本对齐的需求，结合你的代码，这里有几个直接有效的解决方法：

1. 统一设置所有单元格的文本对齐 #

最直接的方式是给表头的所有单元格（.thead div）添加text-align属性，指定你需要的对齐方向（左/中/右）。因为你的Grid列用了repeat(4, 1fr)，每一列的宽度是均匀分配的，所以只要单元格内的文本对齐方式统一，同一列自然就会对齐。

修改你的代码如下：

.grid-table .thead div {
  padding-left: 8px;
  border-right: 1px solid #ddd;
  text-align: left; /* 可替换为 center / right */
}

如果你的表格还有内容行（比如.tbody），记得给内容行的单元格也设置相同的text-align，这样表头和内容的同一列就能完全对齐：

.grid-table .tbody div {
  padding-left: 8px;
  border-right: 1px solid #ddd;
  text-align: left; /* 和表头保持一致 */
}

2. 针对不同列设置个性化对齐 #

如果需要不同列有不同的对齐方式（比如第一列左对齐、第二列居中），可以通过:nth-child()选择器给对应列的单元格单独设置样式：

/* 表头列对齐 */
.grid-table .thead div:nth-child(1) { text-align: left; }
.grid-table .thead div:nth-child(2) { text-align: center; }
.grid-table .thead div:nth-child(3),
.grid-table .thead div:nth-child(4) { text-align: right; }

/* 内容列同步对齐 */
.grid-table .tbody div:nth-child(1) { text-align: left; }
.grid-table .tbody div:nth-child(2) { text-align: center; }
.grid-table .tbody div:nth-child(3),
.grid-table .tbody div:nth-child(4) { text-align: right; }

你也可以给不同列的单元格添加自定义类（比如.col-1, .col-2），这样代码可读性更强，后续维护也更方便。

补充说明 #

你用到的inline-grid只是让容器本身成为inline级元素，内部的Grid布局逻辑和grid是完全一致的，所以对齐方式的设置不受inline-grid的影响，只需专注于单元格的文本对齐属性即可。

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