• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

반응형으로 고쳐보고 싶은데요..

20.07.23 01:28 작성 조회수 114

0

반응형으로 고치려면 어떻게 해야하는지 알 수 있을까요 ㅠㅠ?

답변 1

답변을 작성해보세요.

1

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를 이용해서 배치 순서를 조정해 주었습니다.