성배 레이아웃

이 기본 성배 레이아웃에는 머리글, 바닥글, 왼쪽 사이드바, 오른쪽 사이드바, 기본 콘텐츠가 있습니다. 이전 레이아웃과 비슷하지만 이제 사이드바가 있습니다.

코드 한 줄을 사용하여 이 전체 그리드를 작성하려면 grid-template 속성을 사용합니다. 이렇게 하면 행과 열을 동시에 설정할 수 있습니다.

속성 및 값 쌍은 grid-template: auto 1fr auto / auto 1fr auto입니다. 공백으로 구분된 첫 번째와 두 번째 목록 사이의 슬래시는 행과 열 사이의 구분입니다.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

머리글과 바닥글에 자동 크기 조절 콘텐츠가 있는 마지막 예에서와 같이 여기서 왼쪽 및 오른쪽 사이드바는 하위 요소의 고유 크기에 따라 자동으로 크기가 조정됩니다. 이번에는 세로 (높이)가 아닌 가로 크기 (너비)입니다.

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

        .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}