display: contents元素getBoundingClientRect返回0，如何获取CSS Grid行边界框？

问题背景 #

要给CSS Grid的整行添加hover高亮效果，同时需要获取该行的边界框尺寸。使用display: contents可以让行容器的样式直接作用于子单元格，且不破坏Grid的DOM结构，但此时调用getBoundingClientRect()会返回全0的无效值。遍历行内所有元素计算边界框又要处理各种复杂情况，有没有更简便的实现方式？

简便解决方案 #

方法一：添加不可见整行占位元素 #

保留display: contents让子单元格直接参与Grid布局，同时在row内添加一个占满整行的不可见占位元素，通过它来获取行的边界框。

代码示例

<div class="grid">
  <div class="row" id="firstrow">
      <div class="cell">hello</div>
      <div class="cell" id="data">world</div>
      <div class="cell ipsum">ipsum lorem</div>
      <div class="row-placeholder"></div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.row {
  display: contents;
}
.row:hover .cell {
  background-color: lightgray;
}
.cell {
  border: 1px black solid;
  max-height: 100px;
}
.ipsum {
  height: 200px;
  max-height: 300px;
}
.row-placeholder {
  grid-column: 1 / -1; /* 占满Grid所有列 */
  height: 0; /* 不占用额外高度 */
  pointer-events: none; /* 不干扰鼠标交互 */
}

const rowPlaceholder = document.querySelector("#firstrow .row-placeholder");
const rowRect = rowPlaceholder.getBoundingClientRect();
console.log(rowRect); // 正常获取行的top、left、right、bottom及高度等属性

方法二：用Grid嵌套替代display: contents #

调整行容器的布局方式，让.row本身成为外层Grid的一个全列项，同时内部使用Grid布局对齐列结构。这样.row是正常的DOM元素，可直接获取边界框，hover样式也更易控制。

代码示例

<div class="grid">
  <div class="row" id="firstrow">
      <div class="cell">hello</div>
      <div class="cell" id="data">world</div>
      <div class="cell ipsum">ipsum lorem</div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.row {
  display: grid;
  grid-template-columns: inherit; /* 继承外层Grid的列配置 */
  grid-column: 1 / -1; /* 占满外层Grid所有列 */
}
.row:hover .cell {
  background-color: lightgray;
}
.cell {
  border: 1px black solid;
  max-height: 100px;
}
.ipsum {
  height: 200px;
  max-height: 300px;
}

const row = document.getElementById("firstrow");
console.log(row.getBoundingClientRect()); // 直接返回行的有效边界框

方案对比 #

• 方法一对现有代码侵入性极小，适合需要保留原有DOM结构的场景。
• 方法二DOM结构更清晰，逻辑更直观，无需额外元素，适合可以调整布局结构的场景。

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