CSS-L3-021 / Grid 심화

subgrid 열 정렬

중급

문제

.parent를 2열 Grid로 만들고 .child가 두 열을 차지하며 같은 열 정의를 subgrid로 상속하게 하세요.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

확인할 조건

하위 Grid
subgrid 적용

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<div class="parent"><div class="child"><span>A</span><span>B</span></div></div>
</body>
</html>

목표 화면

힌트

자식이 부모 열 범위를 차지한 뒤 subgrid를 사용합니다.

해설·정답 보기

subgrid는 독립적인 새 열 계산 대신 부모 열을 공유합니다. 지원 브라우저에서 실습합니다.

.parent{display:grid;grid-template-columns:1fr 2fr}.child{display:grid;grid-column:1/-1;grid-template-columns:subgrid}

모르는 문법은 코드 사전에서 ↗

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

풀이 결과

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.

← 같은 난이도 목록 다음 문제: 최소 콘텐츠 축소 →