정렬된 중첩 콘텐츠를 위한 서브그리드
subgrid를 사용해 중첩된 그리드 항목을 부모 그리드의 트랙에 맞춰 정렬합니다.
정렬된 중첩 콘텐츠를 위한 서브그리드은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
서브그리드 문제
일반적인 문제는 다음과 같습니다. 헤더, 본문, 푸터가 있는 카드 그리드가 있을 때 서브그리드가 없으면 카드마다 별도의 레이아웃을 사용하므로 서로 다른 카드의 항목을 동일한 기준선에 맞출 수 없습니다.
서브그리드란 무엇인가요?
subgrid는 중첩된 그리드가 상위 그리드의 트랙 정의를 상속하고 그 정의에 참여하도록 만드는 grid-template-columns 또는 grid-template-rows의 값입니다.
grid-template-rows: subgrid
그리드 컨테이너이기도 한 그리드 항목은 subgrid를 사용하여 자식 항목을 상위 그리드 트랙에 맞춰 정렬할 수 있습니다.
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
마찬가지로 열에 subgrid를 사용하면 중첩된 항목을 상위 열 트랙에 맞춰 정렬할 수 있습니다. 카드 열 전체에서 레이블과 값의 쌍 또는 양식 필드를 정렬할 때 유용합니다.
서브그리드와 align-content 비교
서브그리드가 없으면 align-content나 고정 높이를 사용해 콘텐츠를 부분적으로 정렬할 수 있지만, 이러한 방식은 불안정합니다. 서브그리드를 사용하면 실제 콘텐츠 높이에 따라 진정한 정렬을 구현할 수 있습니다.
양식 정렬에 서브그리드 사용
여러 양식 열에서 레이블과 입력 필드의 쌍 정렬하기:
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>서브그리드로 행과 열 확장하기
서브그리드는 여러 상위 트랙에 걸쳐 배치될 수 있으며 두 방향의 트랙을 모두 상속할 수 있습니다.
<div class="layout"><div class="feature">Feature spans grid</div></div>서브그리드에서 이름이 지정된 영역 사용하기
서브그리드가 상위 그리드에서 이름이 지정된 트랙을 상속하면 해당 이름을 서브그리드 컨테이너 내부에서 배치에 사용할 수 있습니다.
간격 상속
서브그리드는 기본적으로 상위 그리드의 gap 값을 상속합니다. 중첩된 그리드는 동일한 거터 시스템에 참여합니다.
브라우저 지원 참고 사항
서브그리드는 2019년부터 Firefox에서 사용할 수 있었습니다. Chrome은 2023년에 지원을 추가했습니다. 이제 모든 최신 브라우저에서 지원됩니다. 프로덕션에서 사용하기 전에 대상 사용자의 브라우저 지원 여부를 확인하십시오.
서브그리드를 활용한 점진적 향상
서브그리드를 향상 기능으로 추가하기 전에 고정 높이나 Flexbox 정렬을 사용하여 이전 브라우저를 위한 대체 방식을 제공하십시오.
<div class="card-grid"><div class="card">Card content</div></div>빠른 확인
그리드 항목에 grid-template-rows: subgrid를 지정하면 어떤 작업이 수행되나요?
요약
서브그리드는 서로 다른 카드의 항목을 동일한 기준선에 맞춰야 하는 카드 그리드처럼 중첩된 그리드 콘텐츠의 정렬 문제를 해결합니다. 여러 행에 걸쳐 있는 그리드 항목에는 grid-template-rows: subgrid를 사용하고, 열에 맞춰 정렬되는 중첩 콘텐츠에는 grid-template-columns: subgrid를 사용하십시오. 이제 모든 최신 브라우저에서 보편적으로 지원됩니다.
자주 묻는 질문
“정렬된 중첩 콘텐츠를 위한 서브그리드” 강의는 무료인가요?
네 — “정렬된 중첩 콘텐츠를 위한 서브그리드” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“정렬된 중첩 콘텐츠를 위한 서브그리드”에서 뭘 배우나요?
subgrid를 사용해 중첩된 그리드 항목을 부모 그리드의 트랙에 맞춰 정렬합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“정렬된 중첩 콘텐츠를 위한 서브그리드” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 이름이 지정된 선과 그리드 영역
- minmax를 사용한 Auto-fit 및 Auto-fill
- 암시적 그리드 및 Grid-Auto-Flow
- 정렬된 중첩 콘텐츠를 위한 서브그리드