문제의 상황 및 요구사항
- 세로로 나열되어있는 list를 grid 형태로 수정
- 가로형 스크롤로 UI 구현
해결 방안
- css grid와 scroll snap을 이용하여 구현
.container {
display: grid;
overflow-x: scroll;
scroll-snap-type: x mandatory;
grid-auto-flow: column;
grid-template-columns: 85% 100%;
grid-template-rows: repeat(5, auto);
grid-row-gap: 20px;
grid-column-gap: 12px;
}.item {
display: flex;
scroll-snap-align: center;
}생각보다 어렵지 않은 작업이다. slick-carousel이나 js 코드로 구현할 필요 없이 css 코드 몇 줄이면 쉽게 구현할 수 있다.
- 결과 화면
참고 및 출처 scroll-snap-type(MDN)