CSS 网格 - 跨列表项强制使用公共列大小

Question

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

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

<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 网格能为我解决这个问题，但我想不通...

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 网格是否是这项工作的错误工具，还是我遗漏了什么？

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>

Answer 2

解决此问题的新方法是使用显示：内容。

它将使您的 HTML 变平并保持语义。

支持仍然是 low，但可能会比 subgrid 来得更快。

你会发现this article in CSS Tricks有趣

ul {
  list-style: none;
  justify-content: stretch; 
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 10px;
}

li {
  display: contents; /* make it disapear */
}

li:nth-child(odd) {
  background-color: red;
  color: blue;
  font-weight: bold;
}

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

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 网格 - 跨列表项强制使用公共列大小

CSS Grid - enforcing common column size across list items

html

css

css-grid