둘 다 페이지에서 레이아웃을 구성할 때 자주 사용되는 CSS 속성
Flexbox는 1차원 레이아웃, Grid는 2차원 레이아웃
Flexbox는 row 또는 column 중 하나를 기준으로 요소를 정렬하고 배치하는 데 최적화
주로 행이나 열 중 하나의 방향으로 정렬해야 할 때 유용, 복잡한 행과 열을 모두 포함하는 레이아웃에는 한계
Grid는 행과 열을 모두 사용해 요소를 배치, 복잡한 레이아웃 구성, 웹페이지의 전체적인 구조를 잡는데 적합
==================================
Flexbox는 콘텐츠 중심으로, 콘텐츠가 추가되거나 줄어들 때 유연하게 대처하기 좋음
수평, 수직 방향으로 콘텐츠를 정렬하고 간격을 조절하는 데 유용, 버튼 그룹, 내비게이션 바 등 한 줄의 콘텐츠가 주가 되는 구성에 적합
Grid는 레이아웃 중심으로 페이지 구조는 구성하는 데 최적화
ex - 카드 레이아웃, 갤러리 형식 등 명확하게 구분된 영역을 기반으로 레이아웃을 구성할 때 Grid가 효과적
======================
Flexbox는 주로 요소가 컨테이너의 크기나 위치에 맞춰 자동 정렬, justify-content와 align-items 속성을 사용해, 주 축 방향으로 요소들을 배치하고 여백을 조절
Grid는 행과 열을 사전에 정의하고 그 격자에 요소를 배치하는 방식
grid-template-rows, grid-template-columns와 같은 속성으로 행과 열의 크기를 정의, 각 요소의 위치를 세밀하게 설정할 수 있음
