1. Grid이란?
- 레이아웃을 화면에 표시하는 방법 중 하나이다. flex와 많이 사용되기 때문에, 적절하게 상황에 맞게 사용하면 된다.
2. 바둑판 레이아웃 만들기
grid를 이용하여 바둑판 레이아웃을 설정할 수 있다. 이 때 grid-template-columns를 이용하면 된다. 정렬 방향을 열의 방향으로 설정하는 속성이다. auto auto auto 라고 설정하면 가로의 사이즈에 꽉 채워서 3개의 박스가 만들어지게 된다. 따라서 3 X 3 형태의 바둑판을 만들 수 있다.
3. 홈페이지 레이아웃 만들기
grid를 이용하여 홈페이지 레이아웃을 만들 수 있다. grid-template-areas와 grid-area를 이용하여 원하는 대로 배치가 가능하다. 주의할 점은 먼저 grid-area에 어떤 값을 넣을 것인지 설정한 뒤에, grid-template-areas에서 원하는 위치에 배치하면 된다.
4. html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Layout Grid</title>
<link rel="stylesheet" href="./grid__practice.css" />
</head>
<body>
<div class="container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
<div>box 4</div>
<div>box 5</div>
<div>box 6</div>
<div>box 7</div>
<div>box 8</div>
<div>box 9</div>
</div>
<div class="container__homepage">
<div class="item1">header</div>
<div class="item2">menu</div>
<div class="item3">main</div>
<div class="item4">right</div>
<div class="item5">footer</div>
</div>
</body>
</html>5. css 코드
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* grid-template-columns 이용하기. */
.container {
background-color: #c4c4c4;
display: grid;
/* 3 X 3 배열 만들기. */
grid-template-columns: auto auto auto;
}
.container div {
background-color: midnightblue;
margin: 10px;
color: white;
padding: 10px;
text-align: center;
}
/* grid-template-area 이용하기. */
.item1 {
grid-area: header;
background-color: pink;
}
.item2 {
grid-area: menu;
background-color: yellow;
}
.item3 {
grid-area: main;
background-color: tomato;
}
.item4 {
grid-area: right;
background-color: aquamarine;
}
.item5 {
grid-area: footer;
}
.container__homepage {
background-color: skyblue;
border: 1px solid #2196f3;
display: grid;
grid-template-areas:
"header header header header"
"menu main main right "
"menu footer footer footer";
height: 300px;
margin-top: 50px;
}
.container__homepage div {
border: 5px solid #2196f3;
font-weight: 700;
font-size: 30px;
/* 수직 정렬은 inline 태그인 경우에만 가능하다. */
/* 따라서 div는 정렬하고 싶은 요소에 flex를 활용하여 정렬하는 것이 편리하다. */
display: flex;
align-items: center;
justify-content: center;
}6. Flex vs Grid
- Flex : 4가지 방향에서 정렬이 편리하다. 예를 들면 상하 중앙 정렬 시에 vertcal-align은 in-line 태그에서만 사용 가능한데, div에서 flex 설정하고 상하좌우 정렬을 시키면 금방 중앙에 배치할 수 있다.
- Grid : 여러 줄의 정렬이 필요한 경우에 유용하다. 물론 Flex에서도 여러 줄의 정렬이 가능하다. 그리고 원하는 위치에 배치하는 경우 유리하다.
∴ 큰 틀, 특히 사용자 지정 배치 틀은 Grid로 작성하고 세부적인 부분은 Flex로 작성하면 편리할 것 같다.
'web > html css' 카테고리의 다른 글
| [css] Layout Flex 심화 (0) | 2023.03.09 |
|---|---|
| [css] 고급 선택자 (2) | 2023.03.09 |
| [css] Layout Flex (0) | 2023.03.09 |
| [css] Layout Float (0) | 2023.03.08 |
| [css] box-sizing (0) | 2023.03.08 |