Html 如何将grid—template—column应用于元素中的子元素

发布于03月29日

我有一个有行的网格父级.李有两个子元素.第一个子元素的宽度未知.我想设置自动列宽.我可以用这个来实现这一点:

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

推荐答案

subgrid可用于使.row列轨道的大小与父网格的大小相同.

行应包含父行中定义的所有列.

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

.row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

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