Flex와 Grid

 

Flex를 사용하는 경우

1. 요소와 내부 아이템을 수직, 수평 정렬할 때 (justify-content, align-items 등)

2. 유연한 크기 조절이 필요할 때 (flex-grow, flex-shrink 등)

3. 아이템의 순서를 동적으로 변경할 필요가 있을 때 (order)

 

 

Grid를 사용하는 경우

1. 비교적 유연하지 않고 복잡하며, 고정된 레이아웃이 필요할 때

2. 화면을 큰 단위로 분할할 때

3. 요소와 내부 아이템을 수직, 수평 정렬할 때 (justify-item, align-items 등)

4. 라인 기반의 위치 지정이 필요할 때