html – CSS Grid – 跨列表项强制执行常用列大小

我有一个< 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是错误的工具,还是我错过了什么？

解决方法

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

是的,没有更多的清单

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