20230723 [Grid와 Flex]

Grid와 Flex는 둘 다 반응이 빠르고 유연한 웹 디자인을 만드는 데 사용되는 CSS 레이아웃 모델이다. 그들은 레이아웃을 달성하기 위한 다양한 접근 방식을 제공하며 고유한 특성을 가지고 있다.

Grid와 Flex 차이점

Flex

주로 단일 행 또는 열을 따라 항목을 정렬하도록 설계된 1차원 레이아웃 모델이다.
기본 축(행 또는 열)을 따라 공간을 분배하고 가로 또는 세로 레이아웃에 사용할 수 있다.
1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있다.
-> Flex 컨테이너 안(태그 안)에 있는 item들의 방향을 결정하는데, 기본적으로는 row로 형성되어 있다.
-> flex-direction을 통해서 축을 바꿀 수 있다. row 방향을 column으로 바꿀 수 있다.

Grid

행과 열을 모두 정의하여 복잡한 레이아웃을 만들 수 있는 2차원 레이아웃 모델이다.
가로 및 세로 치수 모두에서 요소의 위치 지정을 더 잘 제어할 수 있다.
2차원으로 수평 수직을 동시에 영역을 나눌 수 있다.
-> grid-template-columns 속성을 이용하여 행을, grid-template-rows 속성을 이용하여 열을 바꿀 수 있다.