Flexbox와 Grid 조합하기
페이지의 큰 레이아웃에는 Grid를, 컴포넌트 수준의 정렬에는 Flexbox를 사용하고, 각 도구를 언제 선택해야 하는지 알아봅니다.
Flexbox와 Grid 조합하기은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
서로 보완하는 도구
플렉스박스와 그리드는 경쟁 관계가 아니라 함께 사용하도록 설계된 도구입니다. 일반적인 패턴은 CSS 그리드로 페이지의 큰 구조를 만들고, 각 그리드 영역 안에서는 플렉스박스로 구성 요소의 콘텐츠를 배치하는 것입니다.
그리드로 페이지 레이아웃을, 플렉스로 구성 요소를
그리드로 페이지의 상위 수준 뼈대를 정의합니다. 각 그리드 영역 안에서는 구성 요소 수준의 배치에 플렉스박스를 사용합니다. 예를 들어 탐색 링크는 한 줄로, 카드 콘텐츠는 한 열로 배치할 수 있습니다.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}카드 그리드 패턴
대표적인 패턴은 카드 레이아웃에는 그리드를 사용하고 각 카드 내부 레이아웃에는 플렉스를 사용하는 것입니다. 이렇게 하면 카드가 그리드에서 정렬되고, 내부 요소인 이미지, 제목, 본문, 바닥글은 올바르게 쌓입니다.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */탐색 표시줄 패턴
일반적인 탐색 표시줄은 두 도구를 함께 사용합니다. 탐색 표시줄 자체는 로고와 링크를 배치하는 플렉스 컨테이너입니다. 링크 영역은 또 다른 플렉스 컨테이너일 수 있습니다. 여러 열로 구성된 메가 메뉴에는 그리드를 사용할 수 있습니다.
홀리 그레일 레이아웃
‘홀리 그레일’ 레이아웃(헤더, 3열 가운데 영역, 바닥글)은 오늘날 그리드로 간단하게 구현할 수 있습니다. 왼쪽 사이드바, 메인 영역, 오른쪽 사이드바라는 세 열은 그리드 열이고, 각 영역 안의 콘텐츠에는 플렉스박스를 사용합니다.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}무엇이든 가운데 정렬하기 — 그리드 또는 플렉스
그리드와 플렉스박스 모두 콘텐츠를 완벽하게 가운데 정렬할 수 있습니다. 그리드에서는 place-items: center를 사용합니다. 이는 align-items와 justify-items의 단축 속성입니다. 플렉스에서는 justify-content: center; align-items: center를 사용합니다.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}반응형 사이드바 레이아웃
모바일에서는 한 열로 배치하고 탐색 영역을 위에 둡니다. 태블릿 이상에서는 사이드바와 콘텐츠를 나란히 배치합니다. 그리드를 사용하면 미디어 쿼리에서 template-areas를 변경하는 것만으로 이를 선언적으로 구현할 수 있습니다.
아이콘과 텍스트 패턴
아이콘을 텍스트 옆에 배치하는 것은 매우 일반적인 소규모 레이아웃입니다. 한 줄에서 정렬해야 하므로 플렉스박스가 이 작업에 적합합니다.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }둘 중 하나를 선택하는 기준
그리드를 선택하는 경우는 행과 열을 모두 기준으로 생각할 때, 항목을 여러 트랙에 걸쳐 정렬해야 할 때, 페이지 뼈대를 만들 때입니다. 플렉스를 선택하는 경우는 한 방향으로 생각할 때, 항목이 줄어들고 늘어나야 할 때, 버튼을 한 줄로 배치하거나 항목을 세로로 쌓을 때입니다.
과도하게 복잡하게 만들지 않기
때로는 복잡한 그리드보다 max-width와 margin: auto를 사용한 간단한 블록 요소가 더 적합합니다. 모든 레이아웃에 그리드가 필요한 것은 아닙니다. 작업을 수행할 수 있는 가장 간단한 도구를 사용합니다.
레이아웃 문제 디버깅하기
DevTools에서 Elements 패널의 그리드 또는 플렉스 배지를 클릭하면 그리드 선이나 플렉스 항목 윤곽선을 오버레이로 표시할 수 있습니다. 이렇게 하면 보이지 않던 레이아웃 구조가 드러나 정렬 문제를 진단하는 데 큰 도움이 됩니다.
빠른 확인
페이지 수준 레이아웃과 구성 요소 수준 레이아웃에 각각 가장 일반적으로 사용하는 레이아웃 도구의 조합은 무엇입니까?
복습: 그리드와 플렉스 결합하기
그리드와 플렉스박스는 서로 보완하는 도구입니다. 2차원 페이지 구조에는 그리드를 사용합니다. 1차원 구성 요소 내부 배치에는 플렉스박스를 사용합니다. 그리드에 place-items: center를 설정하면 모든 항목이 가운데 정렬됩니다. 카드 본문에 flex-direction: column과 flex: 1을 설정하면 카드 바닥글이 아래로 밀려납니다. DevTools 오버레이 배지로 디버깅할 수 있습니다.
자주 묻는 질문
“Flexbox와 Grid 조합하기” 강의는 무료인가요?
네 — “Flexbox와 Grid 조합하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Flexbox와 Grid 조합하기”에서 뭘 배우나요?
페이지의 큰 레이아웃에는 Grid를, 컴포넌트 수준의 정렬에는 Flexbox를 사용하고, 각 도구를 언제 선택해야 하는지 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“Flexbox와 Grid 조합하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.