Как сделать не равномерную сетку из блоков div?

Question

[zeni1agent]

Я хочу попробовать сделать слой из блоков с позицией absolute с не равномерным распределением как здесь:



Но более хаотично с большим разбросом и случайно с большим количеством мелких деталей.

Единственное что я смог сделать это вот так:

for (var x = 0; x < 10; x++) {
   console.log(x*100);
  for (var y = 0; y < 10; y++) {
 $("#divi").append('<div id="fig" style="top:'+x*100+'px;left:'+y*100+'px;">g</div>');
}}

<div id="divi"></div>

#fig{
  background:red;
  position:absolute ;
  width:98px;
  height:98px;
}

Answer 1

[Арсений Матыцин]

Ты можешь задать размеры в соотношении на флексах, на простой и тупой блочной схема, на более подходящих гридах и использовать masonry-скрипт (не имеет смысла, если сделал на гридах). А уж абсолютно позиционировать точно нет смысла, по крайней мере, пока не дойдешь до кирпичной кладки, там это за тебя скрипт сделает.