반응형
bootstrap을 통해 grid system에 대한 인지도가 높아진 이후 grid framework이 다수 소개되었고, 개발에 도입하는 빈도도 계속 증가하게 되었다. bootstrap과 같은 종합 framework는 물론이고, grid system만 지원하는 framework까지 그 종류도 다양하게 소개되었다.
이런 인기를 바탕으로 CSS3에서도 css standard로 grid system이 도입되기에 이르렀다.
그 동안 framework의 형태로 사용하던 grid system에 비해 css grid의 장점은 다음과 같다.
- html에 class의 사용이 간단하다. 특히 반응형으로 제작할 때 class영역에 여러 개의 class명을 나열하지 않고 media query를 통해 선언하면 되기 때문에 가독성을 향상시키기에 충분하다.
- column의 수를 12개로 제한하지 안아도 된다. 필요한 만큼 column을 만들 수 있다.
- framework에서 제공되는 필요 없는 css 코드까지 다운로드 할 필요가 없음으로 client의 부하를 줄일 수 있다.
기본 사용법은 다음과 같다.
grid system 전체를 둘러싸게 되는 container를 선언하고 그 내부에 필요한 grid를 생성한다. 마치 <table>로 table영역 전체를 둘러싼 후 그 내부에 row와 col를 선언하는 것과 유사하다.
<!--
* css-grid-01-basic.html v0.1.0
* Update: 2019.10.28
* Author: Developer N
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css-grid-01-basic-v0.1.0</title>
<style>
.grid-container {
display: grid;
/* heigth(필요한 줄 수 만큼) / width(필요한 칸 수 만큼) */
grid: 120px 50px / auto auto auto auto auto;
grid-gap: 5px;
}
.grid-container > div {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
</div>
</body>
</html>
반응형
'CSS3' 카테고리의 다른 글
| [CSS3] 모서리 둥글게 하는 css 요소 border-radius (0) | 2019.12.04 |
|---|---|
| [CSS3] 사용하는 단위계의 종류 (0) | 2019.12.03 |
| [CSS3] outline과 border의 차이 (0) | 2019.12.01 |
| [CSS3] CSS style guide (0) | 2019.11.06 |
| [CSS3] 가로 세로 중앙 정렬 방법(2) (0) | 2019.10.30 |
| [CSS3] 가로 세로 중앙 정렬 방법(1) (0) | 2019.10.29 |
| [CSS3] grid system : cell (0) | 2019.10.29 |
| [CSS3] grid system : template (0) | 2019.10.28 |
DeveloperN
개발자 n의 개발 이야기(draft)