flex와grid차이점

grid : 컨테이너

• 1차원 레이아웃 시스템 수직, 수평중 택1 분류이다.
  요소 간의 간격
  • grid-gap: 행과 열 간격
  • grid-row-gap: 행
  • grid-column-gap: 열
  • 최소 및 최대 너비 반응형
    grid-template-columns OR grid-area
  • 다차원 레이아웃 (grid-template-areas)

Flex : 컨텐츠

• 2차원 레이아웃 시스템 수직, 수평 둘 다 가능 분류
• 컨텐츠 수직 정렬 (align-items)
  열 또는 행을 한 방향으로 정렬
  • justify-content: space-around
  • flex-direction: row

내일 좀 더 채우쟈!