grid레이아웃
비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다.
우선 만들어야 할 레이아웃을 먼저 스케치 해놓고 만드는것이 가장 편합니다.
일단 레이아웃 결과물을 먼저 가져와서 보여 주었습니다.
처음으로 해야할 것은 박스를 만들기 입니다.
저 그림에는 박스를 7개를 사용한것이 보입니다.
그러므로 "body" 부분에 "<wrap>"의 부모박스 밑에 7개의 박스를 만들고 각각 id를 주었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃- gird</title>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<article id="article1"></article>
<article id="article2"></article>
<article id="article3"></article>
<footer id="footer"></footer>
</div>
</body>
</html>두번째로 "head" 부분에 "<style>" 을 적고 박스 각각의 색과 전체적으로 간격을 없애주기위해
"*"으로 전체를 margin, padding 을 0 으로 만들어 줍니다. 그리고 박스전체를 중앙으로 오게 하기 위해 부모박스인 "#wrap"에 width: 1200px과 margin: 0 auto;를 넣어 줍니다.
세번째로 각각의 자식 박스에게 영역을 주기위해 "gridm-area"를 써서 자식이름을 넣어두고, 부모 박스인 "#wrap"에 "display: grid;로 바꿔줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃- gird</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #E1F5FE;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
}
#header {
background-color: #81D4FA;
grid-area: header;
}
#nav {
background-color: #81D4FA;
grid-area: nav;
}
#aside {
background-color: #4FC3F7;
grid-area: aside;
}
#article1 {
background-color: #29B6F6;
grid-area: article1;
}
#article2 {
background-color: #03A9F4;
grid-area: article2;
}
#article3 {
background-color: #039BE5;
grid-area: article3;
}
#footer {
background-color: #0288D1;
grid-area: footer;
}
</style>네번째로 부모박스인 "#wrap"에 "gird- template-areas"를 만들어 레이아웃을 테이블 형태로 만들어줘어야합니다. 그리고 가로(grid-template-columns),세로(grid-template-rows) 범위를 정해 주어야하는데 이것은 밑에 이미지와 css를 보고 이해하는 것이 더 빠를 것 입니다.
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside article1"
"aside article2"
"aside article3"
"footer footer"
;
grid-template-columns: 300px 900px;
grid-template-rows: 100px 100px 260px 260px 260px 100px;
}
가로(grid-template-columns):
왼쪽부터 300px,900px
세로(grid-template-rows):
위에서부터100px,100px,260px,260px,260px,100px
grid-template-areas
"header header"
"nav nav"
"aside article1"
"aside article2"
"aside article3"
"footer footer"
이렇게 하면 grid를 사용해 레이아웃을 만들수 있습니다.