html - CSS 网格 : align text in the same column

Question

我使用 inline-grid 将元素布置在同一行中:

.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;
}

<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>

我有一把 fiddle here演示对齐问题。

当我填充几行时，我注意到同一列中的文本对齐方式受到前一列(所附屏幕截图中的第一列)中文本长度的影响。我尝试使用 justify-items: start 但它似乎对我不起作用。有什么方法可以对齐同一列中的文本？谢谢

Answer 1

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

.grid-table .tbody .tr {
    display: inline-grid;
    line-height: 35px;
    width: 100%;
    grid-template-columns: repeat(4, 1fr); /* not grid-auto-columns */
    grid-auto-flow: column;
    justify-items: start;
  }