암시적 그리드 및 Grid-Auto-Flow
CSS Grid가 암시적 행과 열을 사용해 명시적으로 정의된 트랙 너머의 항목을 처리하는 방식을 이해합니다.
암시적 그리드 및 Grid-Auto-Flow은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
명시적 그리드와 암시적 그리드
명시적 그리드는 grid-template-columns와 grid-template-rows로 정의합니다. 항목이 이렇게 정의된 트랙을 넘어가면 브라우저가 암시적 트랙을 자동으로 생성합니다.
grid-auto-rows
암시적으로 생성된 행 트랙의 크기를 정의합니다. 이 속성을 지정하지 않으면 암시적 행은 콘텐츠에 맞게 auto 크기로 설정됩니다.
<div class="gallery">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>minmax와 함께 사용하는 grid-auto-rows
암시적 행의 높이를 특정 값 이상으로 유지하면서 더 크게 확장할 수 있도록 만드십시오.
<div class="feed">
<div>1</div><div>2</div><div>3</div>
</div>grid-auto-columns
항목이 명시적으로 정의된 열 범위 밖에 배치될 때 암시적 열 트랙의 크기를 정의합니다.
<div class="timeline">
<div>Event 1</div><div>Event 2</div>
</div>grid-auto-flow
자동 배치 알고리즘이 항목을 배치하는 방식을 제어합니다.
row(기본값) — 행에 배치하고 필요할 때 새 행 추가column— 열에 배치하고 새 열 추가row dense— 뒤로 되돌아가 빈 공간을 적극적으로 채움column dense— 열 방향으로 빈 공간을 촘촘하게 채움
grid-auto-flow: dense
dense는 알고리즘이 여러 트랙에 걸쳐 배치된 큰 항목 때문에 생긴 빈 공간을 채우도록 시도하게 합니다. 이로 인해 항목이 원래 순서와 다르게 표시될 수 있습니다.
<div class="masonry">
<div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
</div>자동 배치 열 패턴
필요에 따라 열이 늘어나는 가로 스크롤 카드 띠입니다.
<div class="strip">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>갤러리를 위한 촘촘한 배치
크기가 서로 다른 사진을 사용하며 빈 공간을 채우는 사진 갤러리입니다.
<div class="gallery">
<div class="wide">Wide</div>
<div class="tall">Tall</div>
<div>3</div><div>4</div>
</div>암시적 그리드와 이름이 지정된 영역
이름이 지정된 영역은 명시적 그리드에만 적용됩니다. 암시적 그리드에 배치된 항목은 이름이 지정된 영역을 직접 사용해 배치할 수 없으며, 선 번호 또는 span을 사용해 배치해야 합니다.
암시적 그리드 시각화
Chrome DevTools에서 레이아웃 오버레이는 명시적 그리드 선(실선)과 암시적 그리드 선(점선)을 모두 표시합니다. 이를 통해 자동으로 배치된 항목이 어디에 놓이는지 파악할 수 있습니다.
항목별 암시적 크기 제어
암시적 그리드에서 여러 행에 걸쳐 배치되는 항목은 올바른 크기를 지정하려면 grid-auto-rows가 필요합니다. 이 속성이 없으면 암시적 행이 콘텐츠에 맞게 크기가 정해져 레이아웃이 고르지 않게 될 수 있습니다.
빠른 확인
grid-auto-flow: row dense는 어떤 작업을 합니까?
요약
암시적 그리드는 자동으로 생성된 트랙을 추가해 명시적 그리드를 확장합니다. grid-auto-rows/columns가 크기를 제어하고, minmax()가 트랙을 유연하게 만듭니다. grid-auto-flow는 배치 방향을 지정합니다. dense 배치는 빈 공간을 적극적으로 채우므로 벽돌식 레이아웃에 유용하지만 시각적 순서를 깨뜨릴 수 있습니다.
자주 묻는 질문
“암시적 그리드 및 Grid-Auto-Flow” 강의는 무료인가요?
네 — “암시적 그리드 및 Grid-Auto-Flow” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“암시적 그리드 및 Grid-Auto-Flow”에서 뭘 배우나요?
CSS Grid가 암시적 행과 열을 사용해 명시적으로 정의된 트랙 너머의 항목을 처리하는 방식을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“암시적 그리드 및 Grid-Auto-Flow” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 이름이 지정된 선과 그리드 영역
- minmax를 사용한 Auto-fit 및 Auto-fill
- 암시적 그리드 및 Grid-Auto-Flow
- 정렬된 중첩 콘텐츠를 위한 서브그리드