인프런 커뮤니티 질문&답변
작성한 질문수
퀴즈
카테고리 정렬 예제에서 JavaScript 사용 없이 CSS만으로 아이템을 카테고리별로 모아 보여주는 주요 방식은 무엇일까요?
CSS Flexbox의 order 속성을 동적으로 변경합니다.
숨겨진 라디오 버튼의 체크 상태에 따라 Grid 아이템의 위치를 CSS로 제어합니다.
CSS 애니메이션을 사용하여 아이템을 그룹별로 이동시킵니다.
미디어 쿼리를 사용하여 카테고리별 레이아웃을 분리합니다.
답변 1
1
1분코딩
지식공유자
네 정렬 자체는 가능합니다. 어차피 한 줄에 배치시키는게 포인트니까요~
단, 개수가 다르면 폭도 달라지기 때문에 개수에 따라 보기좋게 만들려면 스크립트나 그리드 설정 외의 CSS를 사용해야 합니다. 예제처럼 헤더가 따로 있는 경우도 헤더의 컬럼 개수에 맞춰 스크립트로 숫자를 조정해주는 작업이 필요할 거고요.
현재 상태에서 개수를 조정하면,
ㅁㅁㅁㅁㅁㅁㅁㅁㅁ
ㅁㅁㅁㅁ
ㅁㅁㅁㅁ
ㅁㅁㅁㅁㅁ
ㅁㅁ
이런 느낌으로 배치가 바뀔거예요. 개수가 많은 행은 폭도 줄어들거고요~
아 그렇군요. 그렇다면
A 타입
1 2 3 4
5 6 7 8
B 타입
1 2 3 4
C 타입
1 2 3
이렇게는 안되는 것이죠?