flex와 grid에 대한 비교

flex 와 grid

flex 와 grid 의 공통점은 프론트엔드 레이아웃을 구성하는 속성이란 점 입니다.

두 속성 모두 레이아웃을 어떻게 배치할지 정할 때 사용합니다.

다만, 상황에 따라 더 좋은 속성을 사용하기 위해 두 속성의 차이점을 알아보도록 하겠습니다.

 

두 속성의 가장 큰 차이점은 배치 방식의 차이입니다.

flex : 컨테이너를 가로나 세로, 하나의 방향으로 나열하는 배치속성

flex-direction으로 레이아웃의 배치 방향을 지정합니다.

grid에 비해 간단한 배치가 되지만,

2차원 구성에는 grid만큼 세밀하게 적용되지는 않습니다.

 

grid : 2차원으로 구성된 격자형식 배치속성

2차원 격자를 만들기 위해 grid-template 속성으로 가로와 세로를 지정하고, 

각 격자별 크기를 지정할 수도 있습니다.

이 덕에 좀 더 세밀한 2차원 레이아웃을 만들수 있지만, flex에 비해 손이 더 갑니다.

 

이러한 차이 때문에 grid는 2차원 레이아웃 정렬 및 배치에 사용하는것이 좋고,

flex는 단방향 콘텐츠 정렬에 사용하는 것이 좋습니다.