Flex

• 1차원으로 수평, 수직 영역 중 하나의 방향
• 컨텐츠 수직 정렬 : align-items
• 열 또는 행을 한 방향으로 정렬 : justify-content: space-around; , flex-direction: row;

Grid

• 2차원으로 수평, 수직 동시에 영역을 나눌 수 있음
• 행과 열 간격: grid-gap
• 행: grid-row-gap
• 열: grid-column-gap
• 최소 및 최대 너비 반응형 : grid-template-columns, grid-area

• grid-template-columns : 행
• grid-template-rows : 열