이전 글에 그리드의 기본에 대해 적었었다. 이전 글에서는 그리드의 선들의 번호를 통해서 배치를 했다고 하면, 이번에는 그리드의 영역에 이름을 배치하고 아이템을 해당 이름의 영역에 넣는 방식을 적어 볼 예정이다.
- grid-template-areas:
'영역1 영역2 영역3'
'영역4 영역5 영역6' ;
이 방법은 grid-template-columns와 grid-template-rows를 통해 행과 열의 길이를 설정해야 한다.
- grid-template:
'영역1 영역2 영역3' 행1의 높이
'영역4 영역5 영역6' 행2의 높이 / 열1의길이 열2의길이 열3의길이;
영역을 이름으로 설정하고, 행과 열의 길이까지 한번에 작성하는 방법이다. - grid-area: 영역이름;
설정한 이름을 가지고 해당 영역에 넣는 방법은 grid-area 를 사용하면 된다.
grid-template를 사용하여 아래의 표처럼 만들어보자.
| header | ||
| section 1 | nav 1 | |
| section 2 | section 3 | nav 2 |
| footer | ||
<예제 코드>
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 초기화 */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* 디자인 */
.grid-item{
border: 1px solid black;
padding: 50px;
font-size: 2em;
}
/* 플렉스로 격차배치 설정 */
.grid-container{
display: grid;
height: 100vh;
grid-template:
'header header header' 1fr
'sec1 sec1 nav1' 1fr
'sec2 sec3 nav2' 1fr
'footer footer footer' 1fr / 1fr 1fr 1fr;
}
/* 각자 영역에 아이템 배치 */
header{
grid-area: header;
text-align: center;
}
section:nth-of-type(1){
grid-area: sec1;
}
section:nth-of-type(2){
grid-area: sec2;
}
section:nth-of-type(3){
grid-area: sec3;
}
nav:nth-of-type(1){
grid-area: nav1;
}
nav:nth-of-type(2){
grid-area: nav2;
}
footer{
grid-area: footer;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<header class="grid-item">
<h2>header</h2>
</header>
<section class="grid-item">
<h2>section 1</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates, ut? Facilis asperiores quaerat
error praesentium tempore fugiat, eos quis recusandae corrupti optio quam cumque a cupiditate illum
dolorem tenetur vitae?
</p>
</section>
<section class="grid-item">
<h2>section 2</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates, ut? Facilis asperiores quaerat
error praesentium tempore fugiat, eos quis recusandae corrupti optio quam cumque a cupiditate illum
dolorem tenetur vitae?
</p>
</section>
<section class="grid-item">
<h2>section 3</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates, ut? Facilis asperiores quaerat
error praesentium tempore fugiat, eos quis recusandae corrupti optio quam cumque a cupiditate illum
dolorem tenetur vitae?
</p>
</section>
<nav class="grid-item">
<h2>nav 1</h2>
<ul>
<li>이동</li>
<li>이동</li>
<li>이동</li>
</ul>
</nav>
<nav class="grid-item">
<h2>nav 2</h2>
<ul>
<li>이동</li>
<li>이동</li>
<li>이동</li>
</ul>
</nav>
<footer class="grid-item">
<h2> tistory </h2>
</footer>
</div>
</body>
</html>
그리드의 배치
컨테이너
- align-content : start | end | center | space-between | space-around | space-evenly;
- justify-content: start | end | center | space-between | space-around | space-evenly;
- place-content: 수평위치 수직위치 | align-content값 justify-content값;
아이템
- align-self: stretch | start | end | center ;
- justify-self: stretch | start | end | center;
- palce-self: 수평위치 수직위치;
'Frontend > CSS' 카테고리의 다른 글
| CSS에서 스타일의 우선순위를 정해보자(@layer) (0) | 2024.07.13 |
|---|---|
| CSS에서 계산을 해보자 (calc()) (0) | 2024.07.13 |
| CSS의 사용자 지정 속성(CSS Custom properties) 설정하기 (0) | 2024.07.13 |
| CSS의 grid를 함께 공부해보자 - 1. 그리드의 기본 (0) | 2024.07.13 |
| CSS에서 수직 위치를 정해보자(z-index) (0) | 2024.07.13 |
| CSS의 flex를 함께 공부해보자 - 2. flex-items (0) | 2024.07.10 |
| CSS의 flex를 함께 공부해보자 - 1. flex-container (0) | 2024.07.10 |
| CSS의 반응형 웹을 위한 미디어쿼리(Media Query) 사용법 (0) | 2024.07.10 |