인프런 커뮤니티 질문&답변

CSS에 아래 코드를 이어서 붙여넣어 보세요^^

@media (max-width: 600px) {
			.grid-container {
				grid-template-columns: 1fr;
			}
			.page-header {
				grid-column: 1;
			}
			.page-footer {
				grid-column: 1;
			}
			#radio-sort-category:checked ~ .cate-music {
				grid-row: auto;
				order: 1;
			}
			#radio-sort-category:checked ~ .cate-food {
				grid-row: auto;
				order: 2;
			}
			#radio-sort-category:checked ~ .cate-game {
				grid-row: auto;
				order: 3;
			}
			#radio-sort-category:checked ~ .cate-tech {
				grid-row: auto;
				order: 4;
			}
		}

600픽셀 이하에서는
grid-template-columns 등을 조정해서 1컬럼 레이아웃으로 바꾸고,
grid-row를 이용했던 카테고리별 정렬은 grid-row는 auto로 초기화 해주고
대신 order를 이용해서 배치 순서를 조정해 주었습니다.