flex: 1차원적 1방향 레이아웃
flex는 행 또는 열로 단일 축을 따라 요소가 배치된다.
flex-direction, justify-content, align-items와 같은 속성으로 레이아웃을 제어할 수 있다.
flex를 사용하면 적합한 레이아웃:
1. 요소들을 수직 또는 수평으로 정렬할 때
2. 여러 개의 요소를 동일한 공간에 넣고 싶을 때
3. 뷰포트에 따라 동적으로 크기와 순서가 변하는 요소를 다룰 때
grid: 2차원적 2방향 레이아웃
grid는 flex의 단일 축 방식을 벗어나 행과 열 모두를 고려한 더 정교한 레이아웃을 생성하는데 사용된다.
grid-template-columns 및 grid-tempate-row와 같은 속성을 사용하여 grid 구조를 정의한다.
grid를 사용하면 적합한 레이아웃:
1. 격자 형태의 레이아웃을 만들 때
2. 행과 열을 동시에 제어해야하는 레이아웃을 만들 때
3. 전체 웹 페이지 레이아웃을 설계할 때
