CSS Grid 복습

행과 열로 화면의 뼈대를 설계합니다

Grid는 2차원 레이아웃을 먼저 정의하고, 각 영역에 콘텐츠를 배치하는 방식으로 생각하면 쉽습니다.

페이지 영역 예시

header
nav
main
aside

`grid-template-areas`를 쓰면 코드 안에서도 페이지 구획이 눈에 보입니다.

grid-template-columns

열의 폭을 먼저 정함

고정값, 비율 단위, 반복 함수를 섞어 구조를 만듭니다.

gap

행과 열 사이 간격

카드, 갤러리, 전체 페이지 구획의 리듬을 일정하게 유지합니다.

@media

좁은 화면에서 한 열

복잡한 영역을 세로 흐름으로 바꿔 스크롤 읽기를 자연스럽게 만듭니다.