CSS Grid를 반응형으로 사용할 수 있을까: auto-fit, auto-fill
개발중인 MODIMOA는 할인 정보 종합 서비스이기 때문에 상품 리스트를 제공해줘야 한다. 리스트에는 Infinite Scroll은 적용되어 있고, 최근 리스트의 레이아웃을 어떻게 해야할지 고민이 들었다. 내가 생각한 리스트 레이아웃의 조건은 다음과 같다. 1. 상품이 잘려서 보여서는 안된다. 2. 상품 간의 간격이 일정해야 한다. 3. 리스트를 하나로 봤을 때, 좌우 여백이 동일해야 한다. (가운데에 있어야 한다.) 4. 마지막 줄의 상품들은 개수가 꽉 안차더라도 윗줄과 배치 간격이 같아야 한다. 5. 창 너비에 따라 리스트의 열 개수가 변해야 한다. (반응형) 만약 flex, flex-wrap, justify-content, gap 속성을 적절히 조합해서 사용한다면 1, 2, 3, 5번은 해결할 수 ..
Study/Web
2022. 3. 25. 18:07
