분류
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;
}
- 이전글텍스트가 한 줄 이상이면 텍스트를 줄여서 '...' 줄임표로 끝내기 18.06.14
- 다음글grid를 사용하여 부모 요소 내에 자식 요소를 가로 및 세로 가운데에 배치 18.06.14