한 줄 요약
한 방향으로 줄 세울 때는 Flexbox, 가로세로 칸을 먼저 나눌 때는 Grid를 씁니다.
비유로 이해하기
Flexbox는 버스 정류장 줄서기입니다. 사람(항목)이 한 줄로 서고, 각자 몸집만큼 자리를 차지합니다. 줄이 길어지면 다음 줄로 넘어가기도 하죠.
Grid는 아파트 평면도입니다. 방의 칸을 먼저 정해 두고, 그 칸에 가구(항목)를 넣습니다. 가구 크기와 상관없이 칸은 가지런히 맞춰집니다.
비교해 보기
- Flexbox: 내용물이 먼저, 크기가 제각각이어도 자연스럽게 줄을 섭니다. 메뉴, 버튼 묶음, 태그 목록에 좋아요.
- Grid: 틀이 먼저, 칸이 가지런히 맞춰집니다. 카드 목록, 갤러리, 페이지 전체 구조에 좋아요.
직접 실행해 보기
같은 다섯 개 항목을 Flexbox와 Grid로 각각 배치했습니다. Grid의 repeat(3, 1fr)를 repeat(2, 1fr)로 바꾸고, 두 결과의 차이를 비교해 보세요.
GenerateBlocks에서는
GenerateBlocks 컨테이너의 Layout 패널에서 Display를 Flex 또는 Grid로 고르는 순간 이 차이가 적용됩니다. 독립학교 홈의 수업 카드 3개는 Grid, 버튼 두 개가 나란히 있는 줄은 Flex로 만들었어요.
참고: Josh W. Comeau: Interactive Guide to Flexbox · Josh W. Comeau: Interactive Guide to CSS Grid · CSS-Tricks: Flexbox Guide