Grid 레이아웃 설계 기준 점검

Grid 레이아웃 설계 기준

Grid는 행과 열을 동시에 설계할 때 강합니다. 영역, 트랙, 간격을 먼저 정하면 반응형 카드와 페이지 골격을 안정적으로 만들 수 있습니다.

판단 기준
01영역 02트랙 03간격 04반응형
Template

반복되는 열은 repeat와 minmax로 크기 규칙을 선언합니다.

Area

header, main, aside처럼 의미 있는 영역은 grid-area로 이름을 붙입니다.

Gap

margin 대신 gap을 쓰면 행·열 간격을 한곳에서 조정할 수 있습니다.

Resize

좁은 화면에서는 열 수를 줄이고 DOM 순서를 해치지 않습니다.