如何将 grid-template-column 应用于元素内的子元素

Question

我有一个包含行的网格父级。罗尔斯有两个孩子。第一个孩子的宽度未知。我想设置自动列宽。我可以用这个实现这个：

.list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
}

<div class="list">
  <span>First Child</span>
  <span>Second Child</span>

  <span>First</span>
  <span>Second Child</span>

  <span>Long Text Child</span>
  <span>Second Child</span>
</div>

但是我需要一个用于行的容器元素，但我无法实现上面的结果：

.list {
  display: grid;
  gap: 1rem;
}

.row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}

<div class="list">
  <div class="row">
    <span>First Child</span>
    <span>Second Child</span>
  </div>
  
  <div class="row">
    <span>First</span>
    <span>Second Child</span>
  </div>
  
  <div class="row">
    <span>Long Text Child</span>
    <span>Second Child</span>
  </div>
</div>

Answer 1

您可以像这样使用

display: contents

“打开”行。

一个缺点是，它将行包装器视为不存在，因此如果您想要为行添加额外的样式，则可能会出现问题。

.list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}

.row {
  display: contents;
}

span {
  outline: 1px solid grey;
}

<div class="list">
  <div class="row">
    <span>First Child</span>
    <span>Second Child</span>
  </div>

  <div class="row">
    <span>First</span>
    <span>Second Child</span>
  </div>

  <div class="row">
    <span>Long Text Child</span>
    <span>Second Child</span>
  </div>
</div>