고급 레이아웃(Grid + Flex 혼합 활용)

CSS Grid는 큰 틀의 레이아웃을 잡는 데 강력하고, Flexbox는 내부 요소 정렬과 배치에 유용함. 따라서 Grid로 전체 영역을 나누고, 각 영역 안에서는 Flex를 활용하는 방식이 가장 실무적임. 예시 코드는 아래와 같음.

.wrapper { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; height: 100vh; }
.header { grid-column: 1 / 3; background: #d1e7ff; }
.sidebar { background: #ffe7d1; display:flex; flex-direction:column; justify-content:space-between; }
.content { background: #e7ffd1; padding:20px; }
.footer { grid-column: 1 / 3; background: #ddd; text-align:center; }
 

<div class="wrapper">
  <div class="header">헤더</div>
  <div class="sidebar">
    <div>메뉴1</div><div>메뉴2</div><div>메뉴3</div>
  </div>
  <div class="content">본문 컨텐츠 영역</div>
  <div class="footer">푸터</div>
</div>
 

이 코드는 화면 전체를 Grid로 구성해 헤더/사이드바/본문/푸터를 배치하고, 사이드바 내부 메뉴는 Flex로 세로 정렬함. 실무 팁으로는 Grid는 큰 틀, Flex는 작은 단위 정렬에 적합하므로 혼합 사용하면 유지보수성과 확장성이 뛰어남. 또한 grid-template-areas를 활용하면 시각적으로 더 직관적인 코드 작성이 가능함.