Flexbox, Grid 🍥
페이지에서 레이아웃을 구성할 때 사용되는 CSS 속성
차이점 1
Flexbox는 1차원, Grid는 2차원 레이아웃이다.
Flexbox는 1차원 레이아웃 속성으로 주로 row, column 중 하나를 기준으로 요소를 정렬하고 배치할 때 사용한다. 반면에 Grid는 2차원 레이아웃 속성으로 row, column을 모두 사용해서 요소를 배치하기 때문에 복잡한 레이아웃이나 웹페이지의 전체적인 구조를 잡는 데 적합하다.
차이점 2
사용 목적의 차이
Flexbox는 콘텐츠 중심으로 콘텐츠가 추가되거나 줄어들 때 유연하게 대처하기 좋다. 예를 들면 수평이나 수직 방향으로 콘텐츠를 정렬하고 간격을 조절하는 데 유용하고, 한 줄의 콘텐츠가 주가 되는 구성에 적합하다.
Grid는 레이아웃 중심으로 페이지 구조를 구성하는 데 최적화되어 있다. 예를 들면 카드 레이아웃, 갤러리 형식 등 명확하게 구분된 영역을 기반으로 레이아웃을 구성할 때 효과적이다.
차이점 3
기본 동작의 차이
Flexbox는 요소가 컨테니언의 크기나 위치에 맞춰서 자동으로 정렬된다. 반면에 Grid는 grid-template-rows, grid-template-columns와 같은 속성으로 행과 열의 크기를 정의하고 요소의 위치를 설정할 수 있다는 차이가 있다.
