gird를 왜 사용하는가?
전 글에서 flex와 마찬가지로 앞으로 활용도가 높아질 것을 대비해 간단히 사용법을 알려드리려고 합니다.
grid layout
비교적 지관적이여서 다른 레이아웃보다 사전지식이 덜 필요합니다.
행과 열의 크기, 셀 간격, 정렬 등을 원하는 대로 설정할 수 있습니다.
미디어 쿼리를 사용하여 화면 크기에 따라 그리드의 구성을 다르게 설정 하여 반응형 레이아웃을 쉽게 구현할 수 있습니다.
그리드를 사용하면 HTML 요소의 구조를 더욱 간결하게 표현할 수 있습니다.
다음은 그리드 사용 예시를 들어보겠습니다.
예시
만약 다음과 같은 레이아웃형태를 만든다고 하면
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aisde"></aside>
<article id="article1"></article>
<article id="article2"></article>
<article id="article3"></article>
<footer id="footer"></footer>
</div>
</body>저는 바디 부분을 이렇게 만들었습니다.
grid를 사용하기 때문에 div요소를 줄여쓸 수 있습니다.
#header {
grid-area: header;
background-color: #B3E5FC;
}
#nav {
grid-area: nav;
background-color: #81D4FA;
}
#aisde {
grid-area: aisde;
background-color: #4FC3F7;
}
#article1 {
grid-area: article1;
background-color: #29B6F6;
}
#article2 {
grid-area: article2;
background-color: #03A9F4;
}
#article3 {
grid-area: article3;
background-color: #039BE5;
}
#footer {
grid-area: footer;
background-color: #0288D1;
}그 다음 스타일 선언을 하고 각각 gird-area를 설정해줍니다.
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aisde article1"
"aisde article2"
"aisde article3"
"footer footer"
;
grid-template-columns: 300px 900px;
grid-template-rows: 100px 100px 260px 260px 260px 100px;
}그 다음 전체를 감싸주는 부모 요소에 해당하는 wrap부분에 display: gird;를 설정해줍니다.
예시를 보면 aside부분과 article부분이 크게 두 부분으로 나눠지므로 위에부터 두 부분으로 나눠 합쳐진다고 생각하면 됩니다. 그러므로, grid-template-areas를 두 부분으로 나눠 각각 요소 이름을 기입합니다.
grid-template-columns은 그리드의 열 수와 각 열의 너비를 정의합니다.(width값이라고 생각하면 됩니다.)
가운데 부분이 1200px에서 300px와 900로 나눠지므로 너비를 300px와 900px로 설정합니다.
grid-template-rows 속성은 행(row)의 크기를 정의합니다.(height 값이라고 생각하면 됩니다)
각각의 값을 설정해주면 위의 레이아웃이 나오게 됩니다!
이상 grid 사용법을 알아봤습니다.