1 개요[ | ]
- CSS grid system
- CSS 그리드 시스템; CSS 그리드
- 많은 웹 페이지들은 그리드뷰 형태로 만들어져 있음
- div와 같은 하나의 행(row) 블럭을 여러 개의 컬럼(col) 블럭으로 구성하는 구조
- 흔히 반응형 웹의 기본기능으로 활용됨
- 넓은 화면에서는 컬럼 수를 늘리고, 좁은 화면에서는 컬럼 수를 줄일 수 있음
- 하나의 row를 최대 12개의 컬럼으로 나눔
2 예시[ | ]
html
Copy
<style>
/* 그리드 CSS */
* { box-sizing: border-box; }
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
width: 100%;
}
@media (max-width: 600px) {
.col-m-0 {display: none;}
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media (min-width: 601px) {
.col-0 {display: none;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
/* 데모용 색상 지정 */
.row>div:nth-child(2n+1) { background:red; }
.row>div:nth-child(2n+2) { background:orange; }
.row>div:nth-child(2n+3) { background:yellow; }
</style>
<h3>비반응형 (비율 그대로)</h3>
<div class="row">
<div class="col-3 col-m-3">3</div>
<div class="col-9 col-m-9">9</div>
</div>
<h3>반응형 - 기본 (모바일 너비 100%)</h3>
<div class="row">
<div class="col-3">3</div>
<div class="col-9">9</div>
</div>
<h3>반응형 - 커스텀 (모바일 너비 지정)</h3>
<div class="row">
<div class="col-3 col-m-12">3 m-12</div>
<div class="col-6 col-m-6">6 m-6</div>
<div class="col-3 col-m-6">3 m-6</div>
</div>