그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록CSS
CSS

CSS Flexbox와 Grid의 차이점에 대해서 설명해주세요

실무4/5
설계4/5
인간3/5
기초2/5

면접관의 질문 의도

두 단어를 모두 들어본 사람인지, _축 개념과 사용 목적(정렬 vs 영역 배치)_ 관점으로 선택을 설명하는 사람인지를 가른다.

큐레이션 답변

학습 자료

Flexbox는 하나의 축(가로 또는 세로)을 따라 정렬·간격·정렬 기준을 잡는 1차원 레이아웃 시스템이다. Grid는 행과 열을 동시에 제어해 영역을 잡고 그 위에 자식을 배치하는 2차원 시스템이다. 컴포넌트 내부 정렬(버튼 그룹, 카드 안 정렬)은 Flexbox가 간결하고, 페이지/섹션 영역 배치(사이드바-콘텐츠-푸터, 카드 그리드)는 Grid가 구조적으로 유리하다. 둘은 대체 관계가 아니라 _계층별로 함께 쓰는 조합_이 일반적이다.

좋은 답변 구조

  1. 01Flexbox(1차원 정렬)·Grid(2차원 영역 배치)의 정의와 축 개념을 먼저 정리한다
  2. 02정렬·간격·영역 배치라는 사용 목적별 차이 축으로 동작 차이를 설명한다
  3. 03컴포넌트 내부 vs 페이지 레이아웃 같은 계층별 선택 기준을 조건으로 짚는다
  4. 04둘을 _계층별로 결합해 쓰는_ 실무 패턴으로 마무리한다

자주 실수하는 포인트

Flexbox와 Grid를 "대체 관계"로 단정한다
단순 정렬에 grid-template-columns로 과한 구조를 만든다
카드 그리드 같은 2차원 영역 배치에 Flexbox + nowrap·wrap을 억지로 적용한다
Grid에서 자식 정렬에 필요한 justify-items/place-items 같은 옵션을 빠뜨린다

실무 맥락

  • 반응형 카드 그리드(폭에 따라 1~4열로 변하는 카탈로그) 레이아웃 작업
  • 헤더/사이드바/콘텐츠/푸터 같은 페이지 레벨 레이아웃 구성
  • 버튼 그룹·태그 리스트처럼 한 축 정렬·간격이 핵심인 컴포넌트 작업

본인 경험에 녹이는 힌트

Flexbox로 만든 카드 그리드를 Grid로 옮기면서 코드가 절반으로 줄어든 경험이 있다면 그 케이스가 그대로 답변 후크가 된다

페이지 레이아웃은 Grid, 카드 내부는 Flexbox로 계층을 나눠본 경험이 있다면 "계층별 결합" 이야기로 자연스럽게 이어진다

반응형 깨짐을 grid-template-areas로 정리한 적이 있다면 도구 선택 기준을 보여줄 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1Flexbox와 Grid를 함께 쓰는 대표 패턴은 무엇인가요
Q2반응형 레이아웃에서 Grid 템플릿은 어떻게 관리하나요
Q3정렬만 필요한 경우 Grid를 쓰면 어떤 단점이 있나요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문