My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it.
To achieve the styling aspect, I make use of the display: contents property, so that the styles can affect the child elements without affecting the overall layout structure.
However, I encountered an issue where attempting to retrieve the size (height) of the row using getBoundingClientRect results in all zeros being returned.
const row = document.getElementById("firstrow");
console.log(row.getBoundingClientRect());
const actual_cell = document.getElementById("data");
console.log(actual_cell.getBoundingClientRect());.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.row {
display: contents;
}
.row:hover div {
background-color: lightgray;
}
.cell {
border: 1px black solid;
max-height: 100px;
}
.ipsum {
height: 200px;
max-height: 300px;
}<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>One possible solution could be to iterate through all the elements below the row. However, this method is quite complex as it involves not only determining the maximum height of the element but also considering its display properties (e.g., pop-up menus or nested display: contents) and position in the grid (such as spanning multiple rows with multiple cells).
Is there a simpler way to accomplish this?