javascript - How can I examine the actual grid area of my grid items in dense auto-flow

Question

Suppose I have a CSS grid with an unknown number of items with unknown row and column spans, flowing automaticly and dense into the grid like this:

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

How can I find out, e.g. in Javascript, in which actual grid areas the individual items are placed?

标签： javascriptcss-grid

Answer 1

I would try to solve this using offset values of each individual item. Since all of them are equally sized we can calculate the actual position for each of them.

Please see my example (added JS code and set body margin to 0) for the idea demonstration. Click on any item you like and check console for the result.

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>