css `display:grid` 속성을 활용한 grid 컨테이너 mixin on redgoose note

css `display:grid` 속성을 활용한 grid 컨테이너 mixin

Nest: Development Category: html&css 2018-09-04

그리드 레이아웃을 만들어보면서 scss의 mixin을 만들게 되었다.
그리드를 중앙정렬을 하려면 외곽 엘리먼트의 사이즈가 지정되어 있어야하는데 block element 라는게 항상 꽉차있는 형태다. 그래서 사이즈를 계산해주고 입력해주는 mixin을 하나 만들어 보았다.

일단은 위치값을 지정할 필요없고, 사이즈를 키우고 싶으면 item 엘리먼트에서 grid-column-end: span 2;와 같은 속성을 넣어주면 된다.


display: grid를 사용하는 이유

masonry 같은걸 사용하면 되는데 왜 display:grid를 선택할 필요가 있냐면 속도다.
순수하게 css만을 사용한 속성을 사용하면 브라우저 재량에 따라 퍼포먼스를 얼마든지 끌어올릴 수 있으며 자바스크립트 이벤트가 성능 비용이 굉장히 강력하기 때문에 왠만하면 피하고 싶음.