css grid를 이용한 기본 웹 사이트 레이아웃
관련링크
본문
HTML :
<div class="grid-layout">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">
Content
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="footer">Footer</div>
</div>
CSS :
.grid-layout {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'sidebar header header'
'sidebar content content'
'sidebar footer footer';
color: white;
}
.grid-layout > div {
background: #333;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
페이지 정보
[ 조회 86회 ] 작성일18-06-14 12:27