넓은 화면
최대 폭, 컬럼 수, 줄 길이가 과하게 퍼지지 않는지 확인한다.
메타 뷰포트와 유연한 레이아웃을 먼저 확인하고, 미디어 쿼리는 콘텐츠가 답답해지는 폭에서 필요한 규칙만 보탠다.
최대 폭, 컬럼 수, 줄 길이가 과하게 퍼지지 않는지 확인한다.
flex-wrap과 grid minmax가 줄바꿈을 자연스럽게 만드는지 본다.
한 열 배치, 터치 간격, 긴 텍스트 줄바꿈을 마지막으로 확인한다.
CSS 도구를 고르기 전에 콘텐츠 폭이 먼저 줄어드는지 보고, 부족한 지점에서만 breakpoint를 추가한다.
열 수, gap, wrapping
한 방향 정렬과 줄바꿈이 필요한 컴포넌트에 적합하다.
카드 목록처럼 행과 열을 함께 조절해야 할 때 유리하다.
상태 기반 반응형 규칙은 컴포넌트와 가까이 둘 수 있다.