Как адаптировать эту сетку?

Question

[Вячеслав Боргомотов]

Всем добрый день. Подскажите пожалуйста, как можно адаптировать данную сетку: https://jsfiddle.net/

Может как вариант проверять текущий размер экрана и добавлять нужное количество фигур. Вообщем рассмотрю различные варианты! Заранее спасибо

Answer 1

[jslby]

Можно как то вот так немного переписать.

function createDiv(className){
  var div = document.createElement('div');
  div.className    = className;
  return div;
}
var inrow = Math.floor(window.innerWidth / 50) - 1;

for (var i = 0; i < inrow; i++) {
  $(".grid-container").append(createDiv('grid-row-1'));
  $(".grid-container").append(createDiv('grid-row-2'));
}

for (var i = 0; i < inrow; i++) {
  $(".grid-row-1").append(createDiv('hexagon'));
  $(".grid-row-2").append(createDiv('hexagon'));
}

Comments

[jslby]

при обновлении будет срабатывать подсчет и все.
Можно повесить событие на изменение ширины, но это лишнее

[Вячеслав Боргомотов]

jslby, Супер! а как повесить событие? (сли мы рассматриваем вариант что человек экран повернул)))

[jslby]

https://api.jquery.com/resize/

[Вячеслав Боргомотов]

jslby, Спасибо!