완벽한 masonry 인터페이스를 구현하는 방법 2

marsonry를 사용하면 사용할수록 더 완벽한 marsonry에 도전하고 싶어지는것 같다.

이전에 marsonry에 대해 정리하고 끝났었는데,

그중에서 css의 gird 속성을 이용하여 marsonry 구현하는 방법도 링크를 달아놓았었다.

그런데 오늘 gird 속성을 이용하여 완벽한 marsonry를 구현한 블로그를 찾게 되었다.

아래의 링크된 사이트에 그에대한 자세한 설명과 codepen 링크가 걸려있다.

https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb

아래는 최종 완성된 링크다 나도 아래의 링크를 참조 및 수정하여 현재 개발하고 있는 사이트에 masonry를 구현할 수 있었다.

https://codepen.io/andybarefoot/pen/QMeZda

grid 시스템을 이용하여 masonry를 구현하면서 느낀점은 기존의 salvattore 라이브러리보다 창 반응형면에서 편하다는 건데,

salvattore는 창의 사이즈에 따라 media query를 통해 박스의 열의 개수를 결정해줘야 되는 거였다면,

grid 시스템을 사용했을시 창의 사이즈에 따라 알아서 그 열의 개수를 조정해준다.

결론적으로 gird 시스템을 이용한 masonry구현이 더 편함을 알 수 있었다.

해당 블로그의 저자는 아래의 링크에 들어가 제대로된 grid 강좌를 들을것을 권하고 있다.

시간이 된다면 grid에 대해서 자세히 공부하여 다양한 블록의 레이아웃을 만드는 것을 마스터 하면 좋을거 같다.

https://gridbyexample.com/video/