如何在网格中拥有离散行

Question

我需要一个布局，其中第一列在所有行中具有共同的

max-content

宽度，但行是不同的元素，因为我需要将事件处理程序附加到它们。到目前为止我可以实现非此即彼。我可以两者兼得吗？

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.row {
  display: grid;
  grid-template-columns: max-content 1fr;
  background-color: #F0F0FF;
}

.col {
  width: max-content;
}

div {
border: 1px solid red;
margin: 10px;
}

Column span
<div class="container">
    <div class="col">323232323232</div>
    <div>1</div>
    <div class="col"></div>
    <div>2</div>
    <div class="col"></div>
    <div>3</div>
</div>

Row element
<div>
  <div class="row">
    <div class="col">323232323232</div>
    <div>1</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div>2</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div>3</div>
  </div>
</div>

Answer 1

Subgrid 现在支持跨浏览器。我想这就是你想要的：

document.querySelectorAll('.row').forEach((row, i) => {
  row.addEventListener('click', () => console.log('row ' + i))
});  

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.row {
  display: grid;
  grid-column: 1 / 3;
  grid-template-columns: subgrid;
  background-color: #F0F0FF;
}

.col {
  width: max-content;
}

div {
  border: 1px solid red;
  margin: 10px;
}

<div class="container">
  <div class="row">
    <div class="col">323232323232</div>
    <div>1</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div>2</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div>3</div>
  </div>
</div>