grid로 masonry 구현시 한계점

바로 이전 포스트에서 나는 완벽한 masonry를 구현하는 방법에 대해 포스트 하였다.

하지만 오늘 몇가지 실험을 해본결과 grid로도 완벽한 masonry를 구현하기에 한계가 존재한다는 사실을 알게 되었다.

일단 아래는 내가 해당 스크립트를 jquery로 변한한것이다.

function resizeGridItem(item) {

  var grid = $('#list-wrap');

  var rowHeight = parseInt(grid.css('grid-auto-rows').replace('px', ''));

  var rowGap = parseInt(grid.css('grid-row-gap').replace('px', ''));

  var rowSpan = Math.ceil((item.children('.list-wrap').height() + rowGap)/(rowHeight + rowGap));

  item.css('grid-row-end', 'span ' + rowSpan);

}

function resizeAllGridItems(){

  $('.list-box').each(function() {

    resizeGridItem($(this));

  })

}

resizeAllGridItems();

// window.addEventListener('resize', resizeAllGridItems);

$(window).resize(function() {

  resizeAllGridItems();

})

$('.list-box').each(function() {

  var temp = $(this);

  temp.imagesLoaded(function() {

    resizeGridItem(temp);

  });

})

예제를 본 사람들이라면 위의 코드가 무엇을 의미하는지는 짐작이 갈 것이다.

여튼 이렇게 하나하나 jquery로 변환해보면서 해당 코드가 어떠한 원리로 짜여져 있는지 이해하게 되었는데,

결론부터 말하자면 grid를 이용한 masonry는 안의 콘텐츠 박스가 소수점으로 떨어지면 그 간격이 차이가 생기게 된다.

즉, 박스의 세로 길이가 정수가 아닐경우에 완벽한 사이간격을 가지는 masonry를 구현할 수 없다는 점이다.

이부분은 grid-row-end 속성에서 알 수 있는데, 해당속성이 정수밖에 지원을 안해줌으로 박스의 세로길이가 소수점인 것들은 간격이 맞지 않게 되는 것이다.

완벽한 masonry를 구현하는 방법은 없는걸까?
물론 salvattore 라이브러리를 이용하면 되지만 가로 길이에 제약이 없다면 세팅할것이 많고 사이드바가 존재할 세팅한 것들이 깨지게 된다.

(물론 사이드바의 position을 absolute로 정한거면 문제 없다.)

여튼 최근엔 css-element-query라는 라이브러리를 발견했는데,

해당 라이브러리는 스크린이 아닌 dom element에 반응하는 css 코드를 짜게 도와주는 라이브러리란다.

아래는 해당 라이브러리의 주소다.

https://github.com/marcj/css-element-queries

해당 라이브러리와 salvattore 라이브러리를 조합하면, 조금 번거롭긴 하지만 완벽한 masonry를 구현할 수 있다고 생각한다.