css grid：在同一列中对齐文本

Question

我使用Text来布置同一行中的项目：

＆＃13;

＆＃13;

inline-grid

＆＃13;

.grid-table {
  display: grid;
  overflow-y: scroll;
  height: 100%;
  width: 100%;
  grid-auto-columns: 1fr;
  grid-template-rows: 31px auto;
}

.grid-table .thead {
  line-height: 31px;
  background-color: #f5f5f4;
  border-bottom: 1px solid #ddd;
  display: inline-grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: column;
  font-weight: bold;
}

.grid-table .thead div {
  padding-left: 8px;
  border-right: 1px solid #ddd;
}

.grid-table .thead div:last-child {
  border-right: 0;
}

.grid-table .tbody {
  background-color: #fff;
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: row;
  grid-auto-rows: 35px;
}

.grid-table .tbody .tr:nth-child(even) {
  background-color: #f5f5f4;
}

.grid-table .tbody .tr {
  display: inline-grid;
  line-height: 35px;
  width: 100%;
  grid-auto-columns: repeat(4, 1fr); /* TODO: fix the alignment issue here? */
  grid-auto-flow: column;
  justify-items: start;
}

th {
  font-weight: normal;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.grid-table .td {
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

＆＃13;

＆＃13;

我有一个小提琴here来演示对齐问题。

当我填充几行时，我注意到同一列中的文本对齐方式受前一列（附加屏幕截图中的第一列）中文本长度的影响。我尝试使用<div class="grid-table top"> <div class="thead"> <div>Name</div> <div>Type</div> <div>Date Modified</div> <div>Modified By</div> </div> <div class="tbody" id="discovery-content-list"> <div class="tr" id="path/to/file1"> <div class="td">bars.scss</div> <div class="td">Document</div> <div class="td">Oct 13, 2015</div> <div class="td">Tony</div> </div> <div class="tr" id="path/to/file2"> <div class="td">bars1111.scss</div> <div class="td">Document</div> <div class="td">Oct 13, 2015</div> <div class="td">Tony</div> </div> <div class="tr" id="path/to/file3"> <div class="td">bars33.scss</div> <div class="td">Document</div> <div class="td">Oct 13, 2015</div> <div class="td">Tony</div> </div> <div class="tr" id="path/to/file4"> <div class="td">bars11111111.scss</div> <div class="td">Document</div> <div class="td">Oct 13, 2015</div> <div class="td">Tony</div> </div> </div> </div>，但它似乎对我不起作用。有没有什么方法可以在同一列中对齐文本？感谢

Answer 1

将++更改为grid-auto-columns： https://jsfiddle.net/c7pqw5mj/1/

grid-template-columns