如何在密集的自动流中检查网格项目的实际网格区域

Question

假设我有一个 CSS 网格，其中包含未知数量的项和未知的行和列跨度，像这样自动并密集地流入网格：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 30px);
  grid-template-rows: repeat(10, 30px);
  grid-auto-flow: row dense;
}
.item {
  color: white;
  text-align: center;
}
.a {
  background-color: red;
}
.b {
  background-color: blue;
  grid-column-end: span 2;
}
.c {
  background-color: green;
  grid-row-end: span 2;
}
.d {
  background-color: brown;
}

<div class="grid">
  <div class="item a">1</div>
  <div class="item b">2</div>
  <div class="item d">3</div>
  <div class="item c">4</div>
  <div class="item a">5</div>
  <div class="item a">6</div>
  <div class="item a">7</div>
  <div class="item a">8</div>
  <div class="item c">9</div>
  <div class="item b">10</div>
  <div class="item a">11</div>
  <div class="item a">12</div>
  <div class="item a">13</div>
  <div class="item a">14</div>
  <div class="item a">15</div>
</div>

我怎样才能知道，例如在 Javascript 中，各个项目放置在哪些实际的网格区域中？

Answer 1

我会尝试使用每个单独项目的偏移值来解决这个问题。由于它们的大小都相同，我们可以计算它们的实际位置。

请参见我的示例（添加 JS 代码并将正文边距设置为 0）以进行想法演示。单击您喜欢的任何项目并检查控制台以获取结果。

let items = document.getElementsByClassName("item");
for(let i = 0; i < items.length; i++) {
  items[i].addEventListener("click", function() {
    getGridPos(items[i]);
  });
}

function getGridPos(elem) {
  let offsetTop    = elem.offsetTop;
  let offsetLeft   = elem.offsetLeft;
  let offsetWidth  = elem.offsetWidth;
  let offsetHeight = elem.offsetHeight;
  let column_start = (offsetLeft / 30) + 1;
  let column_end   = column_start + offsetWidth / 30;
  let row_start    = (offsetTop / 30) + 1;
  let row_end      = row_start + offsetHeight / 30;
  
  console.log("grid-row: " + row_start + "/" + row_end + ", " +
              "grid-column: " + column_start + "/" + column_end);
}

body {
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 30px);
  grid-template-rows: repeat(10, 30px);
  grid-auto-flow: row dense;
}
.item {
  color: white;
  text-align: center;
}
.a {
  background-color: red;
}
.b {
  background-color: blue;
  grid-column-end: span 2;
}
.c {
  background-color: green;
  grid-row-end: span 2;
}
.d {
  background-color: brown;
}

<div class="grid">
  <div class="item a">1</div>
  <div class="item b">2</div>
  <div class="item d">3</div>
  <div class="item c">4</div>
  <div class="item a">5</div>
  <div class="item a">6</div>
  <div class="item a">7</div>
  <div class="item a">8</div>
  <div class="item c">9</div>
  <div class="item b">10</div>
  <div class="item a">11</div>
  <div class="item a">12</div>
  <div class="item a">13</div>
  <div class="item a">14</div>
  <div class="item a">15</div>
</div>