Flexbox와 Grid는 어떤 기준으로 구분해서 쓰는가?

1차원 선형 배치인지 2차원 격자 배치인지에 따라 고른다.

Flexbox는 한 방향 배치가 목적이다. 내비게이션 바나 아이콘 목록처럼 자식 요소의 크기와 내용에 따라 흐름을 정할 때 쓴다. 요소가 늘어나면 자동으로 다음 줄로 넘기거나 축을 바꿔 배치한다.

Grid는 행과 열을 동시에 다루는 2차원 구조다. 페이지 전체의 큰 구획을 나누거나 카드 형태의 규칙적인 격자를 잡을 때 쓴다. 자식 요소의 내용과 관계없이 부모가 정의한 구역 안에 맞춰 배치한다.

1차원 목록 흐름은 Flexbox로 정하고 큰 틀과 2차원 배치는 Grid로 잡는 방식으로 조합한다.