Как я могу изучить фактическую область сетки моих элементов сетки в плотном автоматическом потоке

#javascript #css-grid

Вопрос:

Предположим, у меня есть 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, в каких фактических областях сетки размещены отдельные элементы?

1. Привет. Что вы пробовали? 🙂

2. Попытался в JS изучить объект стилей, но фактические значения для начала строки сетки, конца строки сетки, начала столбца сетки, конца столбца сетки не заполнены фактическими значениями.

Ответ №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>