CSS Grid: template-areas, auto-fit, minmax
읽기 쉬운 레이아웃을 위해 그리드 영역에 이름을 지정하고, 반응형 열에는 auto-fit과 minmax()를 사용하며, 암시적 트랙을 제어합니다.
CSS Grid: template-areas, auto-fit, minmax은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이름을 지정한 템플릿 영역 — 시각적 레이아웃
grid-template-areas를 사용하면 시각적인 ASCII 아트 형식으로 영역의 이름을 지정할 수 있습니다. 각 문자열은 한 행이고 각 단어는 한 셀입니다. 점(.)은 빈 셀을 나타냅니다. grid-area: name으로 요소를 배치합니다.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }미디어 쿼리를 사용한 반응형 템플릿 영역
중단점에서 template-areas 레이아웃을 변경하면 모바일에서 사이드바를 열에서 메인 콘텐츠 아래로 이동할 수 있습니다.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit과 auto-fill 비교
auto-fit은 빈 트랙을 축소하여 항목이 행을 채우도록 늘립니다. auto-fill은 트랙이 비어 있어도 그리드 구조를 유지합니다. 반응형 카드 그리드에서는 거의 항상 auto-fit을 사용하는 것이 좋습니다.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() 자세히 알아보기
minmax(min, max)는 최소값이 min이고 최대값이 max인 트랙을 정의합니다. 자주 사용하는 조합은 다음과 같습니다. minmax(0, 1fr)(완전히 유연함), minmax(200px, 1fr)(최소 크기가 있는 반응형 트랙), minmax(auto, auto)(콘텐츠에 맞춰 크기 지정)입니다.
열과 행에 걸쳐 배치하기
grid-column: span 2를 사용하면 항목이 두 열에 걸쳐 배치됩니다. grid-row: span 2와 함께 사용하면 그리드에서 2×2 영역을 차지하는 주요 항목을 만들 수 있습니다.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}밀집 자동 배치
grid-auto-flow: dense는 더 작은 항목으로 빈 간격을 뒤에서부터 채웁니다. 항목 크기가 서로 다른 벽돌 쌓기와 비슷한 레이아웃에 유용합니다.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}분수 단위와 백분율
fr 단위는 고정 크기 트랙과 간격을 뺀 후 남은 공간을 기준으로 합니다. fr과 고정 크기를 함께 사용하면 유연성이 극대화됩니다. 예를 들어 사이드바는 고정하고 메인 영역은 유연하게 만들 수 있습니다.
grid-auto-columns와 grid-auto-rows
이 속성들은 암시적으로 생성된 트랙의 크기를 제어합니다. 즉, 항목이 명시적인 그리드 바깥에 배치될 때 사용됩니다. grid-auto-rows: minmax(100px, auto)를 사용하면 암시적 행에 최소 높이를 지정할 수 있습니다.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}DevTools에서 그리드 검사하기
Elements 패널에서 그리드 컨테이너 옆의 ‘그리드’ 배지를 클릭하면 Chrome DevTools가 페이지에 그리드 선과 영역 이름을 겹쳐 표시합니다. 이를 사용하면 예상과 다른 트랙 크기와 항목 배치 문제를 디버깅할 수 있습니다.
CSS 서브그리드
grid-template-columns: subgrid를 사용하면 중첩된 그리드가 부모 그리드의 트랙에 맞춰 정렬됩니다. 2023년부터 모든 최신 브라우저가 지원하며, 카드 그리드 전체에서 카드 내부 항목을 정렬할 때 필수적입니다.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}플렉스박스보다 그리드가 더 적합한 경우
행과 열을 모두 고려해야 하며 명시적인 2차원 제어가 필요할 때는 그리드가 적합합니다. 항목을 한 줄로 배치하거나 세로로 쌓기만 하면 된다면 플렉스박스가 더 간단합니다.
빠른 확인
최소 200px 크기로 들어갈 수 있는 만큼 열을 만들고, 각 열이 남은 공간을 동일하게 나누도록 하는 CSS Grid 값은 무엇입니까?
복습: CSS 그리드 고급
grid-template-areas는 읽기 쉬운 이름 지정 레이아웃을 만듭니다. auto-fit과 minmax를 함께 사용하면 미디어 쿼리 없이 반응형 그리드를 만들 수 있습니다. 항목을 열과 행에 걸쳐 배치할 수 있습니다. 밀집 자동 배치는 빈 공간을 채웁니다. DevTools 그리드 오버레이로 문제를 디버깅할 수 있습니다. 서브그리드는 중첩된 항목을 부모 트랙에 맞춰 정렬합니다.
자주 묻는 질문
“CSS Grid: template-areas, auto-fit, minmax” 강의는 무료인가요?
네 — “CSS Grid: template-areas, auto-fit, minmax” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“CSS Grid: template-areas, auto-fit, minmax”에서 뭘 배우나요?
읽기 쉬운 레이아웃을 위해 그리드 영역에 이름을 지정하고, 반응형 열에는 auto-fit과 minmax()를 사용하며, 암시적 트랙을 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“CSS Grid: template-areas, auto-fit, minmax” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Flexbox 심화: 정렬, 줄바꿈, 순서
- CSS Grid: template-areas, auto-fit, minmax
- Flexbox와 Grid 조합하기
- 테마 설정을 위한 CSS 변수