Flex와 Grid의 차이

Flex와 Grid의 차이

flex는 1차원(선형) 레이아웃으로 컨텐츠를 수직 또는 수평으로 표현하기에 적합하며
grid는 2차원(매트릭스) 레이아웃으로 수직과 수평을 모두 표현하기에 적합하다.

다음 그림은 flex와 grid의 레이아웃을 나타낸다.

flex를 사용하면 적합한 레이아웃

1차원 수평 정렬 : header

1차원 수직 정렬

grid를 사용하면 적합한 레이아웃

2차원 수직+수평 정렬 : 2 x 2