[CSS] 그리드 레이아웃 ( Grid Layout )

<article>
    <header>헤더</header>
    <nav>메뉴</nav>
    <main>본문</main>
    <footer>푸터</footer>
</article>

article {
  color: #fff;
  height: 300px;
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "nav    footer";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

header {
  background: #24c0a5;
  grid-area: header;
}

nav {
  background: #4011c5;
  grid-area: nav;
}

main {
  background: #b42809;
  grid-area: main;
}

footer {
  background: #24c0a5;
  grid-area: footer;
}

위 예제에서는 article 요소가 웹페이지 전체 레이아웃의 컨테이너 역할을 수행합니다.

display: grid를 사용하여 해당 요소를 그리드 컨테이너로 지정하고, 내부의 header, nav, main, footer 요소들이 각자의 그리드 영역을 차지하도록 설정합니다.

 

Grid Template

grid-template-areas 속성은 그리드 내 각 요소의 배치 영역을 명시적으로 정의하는 기능을 제공합니다.

article {
    display: grid;
    grid-template-areas:
        "header header"
        "nav    main"
        "nav    footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 50px 1fr 50px;
}

위 코드에서 grid-template-areas는 각 요소가 레이아웃에서 차지하는 위치를 명시적으로 정의합니다.

• 첫 번째 행에는 header가 두 열을 차지합니다.
• 두 번째 행에는 nav와 main이 각각 배치됩니다.
• 세 번째 행에는 nav와 footer가 나란히 배치됩니다.
  

 

grid-template-columns와 grid-template-rows를 사용하여 그리드의 열과 행의 크기를 지정할 수 있습니다.

• 이 예제에서는 두 열이 각각 200px과 1fr로 설정되어 있습니다.
• 행은 첫 번째와 세 번째가 고정 크기 50px이고, 중간 행은 1fr로 나머지 공간을 차지합니다

 

Grid Area 설정

각 하위 요소는 grid-area 속성을 통해 그리드의 특정 영역에 배치됩니다.

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

이처럼 각 요소에 grid-area를 명시함으로써 그리드에서 배치 위치를 명확하게 정의할 수 있습니다.