[매일메일] CSS Flexbox와 Grid의 차이점 (FE.250116)

 

	Flexbox	Grid
레이아웃	1차원 레이아웃	2차원 레이아웃
사용 목적	콘텐츠 중심 - 콘텐츠가 추가되거나 줄어들 때 유연하게 대처 가능 - 수평/수직 방향으로 콘텐츠 정렬, 간격 조절 - 버튼 그룹, Nav bar 등 - 한 줄의 콘텐츠가 추가 되는 구성	레이아웃 중심 - 페이지 구조 구성에 최적화 - 카드 레이아웃, 갤리러 형식 등 - 명확하게 구분된 영역 기반으로 레이아웃 구성 시
기본 동작	컨테이너 크기/위치에 맞게 자동 정렬 - justify-content와 align-itmes 속성 - 주축 방향으로 요소 배치, 여백 조절 가능	행과 열을 사전에 정의하고 격자에 요소 배치 - grid-template-rows, grid-template-columns 속성 - 행과 열 크기 정의 - 각 요소 위치 세밀하게 설정 가능

 

---

출처

[1] 매일메일. 250116. CSS Flexbox와 Grid의 차이점에 대해서 설명해주세요. 51번. https://maeil-mail.kr