CSS 레이아웃발행일 2026. 8. 28.

Grid로 반응형 문서 레이아웃 만들기

좌측 튜토리얼 목차와 Markdown 본문을 데스크톱과 모바일에 맞게 배치합니다.

#CSS#Grid#Responsive

레이아웃 요구사항#

데스크톱에서는 목차와 본문이 동시에 보이고, 작은 화면에서는 목차가 드로어로 전환되어야 합니다.

css 코드 예제

.tutorial-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 820px);
  gap: clamp(24px, 4vw, 64px);
}

@media (max-width: 860px) {
  .tutorial-layout {
    display: block;
  }
}

본문이 넘치는 문제#

Grid 자식은 기본적으로 콘텐츠 최소 너비보다 작아지지 않습니다. 코드 블록 때문에 전체 화면이 가로로 밀린다면 본문 열과 자식에 min-width: 0을 지정합니다.

css 코드 예제

.tutorial-main,
.markdown-content {
  min-width: 0;
}

.markdown-content pre {
  max-width: 100%;
  overflow-x: auto;
}

모바일 목차#

목차 버튼은 aria-expanded로 상태를 전달하고 Escape 키로 닫혀야 합니다. 닫은 뒤에는 목차를 열었던 버튼으로 포커스를 복귀시킵니다.

정리#

문서 레이아웃에서는 본문 폭, 코드 블록 오버플로, 스티키 영역의 높이를 함께 검증해야 합니다.