grid-template-areas 속성으로 이름을 지정하고 나면 grid-area 속성으로 이름을 그리드 아이템에 배치할 수 있습니다.
형식
grid-area:<행과 열 이름>;
따라서 그림 7-18처럼 그리드 레이아웃을 만들려면 다음과 같이 코드를 작성합니다.
07/02/grid-template-areas.html
<style>
.grid-container{
(중략)
}
#header{
grid-area:header;
}
#sidebar{
grid-area:sidebar;
}
#content{
grid-area:content;
}
#footer{
grid-area:footer;
}
</style>
</head>
<body>
<div class="grid-container">
<p id="header">header</p>
<p id="sidebar">sidebar</p>
<p id="content">content</p>
<p id="footer">footer</p>
</div>
</body>