html - CSS Grid - 跨列表项强制实现通用列大小

Question

我有一个 <ul> -list，其中每个列表项包含多个文本部分。

我希望每个文本部分都尽可能窄，但我仍然希望所有文本在元素之间垂直对齐。例如

<ul>
  <li> A. Name     | Some complex address        | 555-1234 </li>
  <li> Longer Name | Short Addr.                 | 555-1234 </li>
  <li> P. Diddy    | No home                     | 555-1234 </li>
</ul>

我希望 css grid 能为我解决这个问题，但我想不通...

ul {
  list-style: none;
  display: grid;
  justify-content: stretch;	
}

li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 10px;
}

p:nth-child(1) {
  background: #EEEEEE;
  border-right: 1px solid;
}

p:nth-child(2) {
   background: #CECECE;
   border-right: 1px solid;
}


p:nth-child(3) {
    background: #EEEEEE;
}

<ul>
  <li>
    <p>A. Name</p>
    <p>Some complex address</p>
    <p>555-1234</p>
  </li>
  <li>
    <p>Longer Name</p>
    <p>Short Addr.</p>
    <p>555-1234</p>
  </li>
  <li>
    <p>P. Diddy</p>
    <p>No home</p>
    <p>555-1234</p>
  </li>
</ul>

css grid 是不是适合这项工作的工具，还是我遗漏了什么？

Answer 1

他们需要属于同一个网格才能得到这个结果，所以你可以尝试这样的事情:

^{是的，没有更多列表}

.list {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 10px;
}

p:nth-child(3n + 1) {
  background: #EEEEEE;
  border-right: 1px solid;
}

p:nth-child(3n +2) {
  background: #CECECE;
  border-right: 1px solid;
}

p:nth-child(3n+3) {
  background: #EEEEEE;
}

<div class="list">
  <p>A. Name</p>
  <p>Some complex address</p>
  <p>555-1234</p>

  <p>Longer Name</p>
  <p>Short Addr.</p>
  <p>555-1234</p>

  <p>P. Diddy</p>
  <p>No home</p>
  <p>555-1234</p>
</div>

或者考虑 display:table 并且你可以保持你的列表结构:

.list {
  display: table;
  margin:0;
  padding:0;
  border-spacing: 10px;
}
.list li {
  display:table-row;
}
p {
 display:table-cell;
}
p:nth-child(1) {
  background: #EEEEEE;
  border-right: 1px solid;
  white-space:nowrap;
}

p:nth-child(2) {
  background: #CECECE;
  border-right: 1px solid;
  width:100%;
}

p:nth-child(3) {
  background: #EEEEEE;
  white-space:nowrap;
}

<ul class="list">
<li>
  <p>A. Name</p>
  <p>Some complex address</p>
  <p>555-1234</p>
</li>
<li>
  <p>Longer Name</p>
  <p>Short Addr.</p>
  <p>555-1234</p>
</li>
<li>
  <p>P. Diddy</p>
  <p>No home</p>
  <p>555-1234</p>
</li>
</ul>