如何在Grid布局中实现独立行且首列宽度统一为max-content？

完全可以同时满足「所有行第一列统一max-content宽度」和「每行作为独立元素绑定事件」这两个需求，核心思路是用外层Grid容器控制列宽，同时让每个行元素成为Grid容器内的独立行项。

实现代码 #

HTML

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

CSS

.container {
  display: grid;
  grid-template-columns: max-content 1fr; /* 第一列取内容最大宽度，第二列占剩余空间 */
  gap: 10px;
}

.row {
  grid-column: 1 / -1; /* 让每个row占满Grid容器的所有列，成为独立行项 */
  display: contents; /* 让row的子元素直接参与外层Grid布局，保证列宽统一 */
}

/* 样式优化，保留边框和背景 */
.row > div {
  border: 1px solid red;
  padding: 10px;
}

.row {
  background-color: #F0F0FF;
}

JavaScript

for(const el of document.querySelectorAll('.row')) {
  el.onclick = () => {
    el.style.backgroundColor = 'red';
  };
}

原理说明 #

1. 外层Grid容器：通过grid-template-columns: max-content 1fr定义列规则，第一列会自动适配所有行中最宽的内容，实现全局统一宽度。
2. 独立行元素：每个.row作为Grid容器的直接子元素，通过grid-column: 1 / -1占满整行；同时用display: contents让其内部列元素直接参与外层Grid布局——既保证了列宽统一，又保留了.row作为独立DOM元素的特性，可正常绑定点击事件。
3. 对比你原来的两种方案：
   • 第一种「列跨多行」的方式没有独立行元素，无法直接绑定行级事件；
   • 第二种「每个row单独做Grid」的方式，列宽是各行独立计算的，无法全局统一；
   • 现在的方案完美结合了两者的优势。

内容的提问来源于stack exchange，提问作者ZorgoZ