6-3. 12열 그리드 시스템
12 열 그리드 시스템(12 Columns Grid System)은 반응형 웹에서 가장 많이 사용하는 대표적인 그리드 시스템입니다.
12 열 그리드 시스템을 이용하면 다양한 너비의 블록 요소를 쉽게 만들 수 있습니다.
12열 그리드에서 하나의 열의 너비는 100%를 12로 나눈 8.33%가 됩니다. 12열 그리드
시스템에서 클래스를 이용하여 12개의 열의 너비를 다음과 같이 정의할 수 있습니다.
12열 그리드 시스템그 사용 예
ex6-4.html
<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
.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%;}
[class*="col_"] {
float: left;
padding: 15px;
}
.row {
height: 60px;
}
.row div {
background-color: skyblue;
border: solid 1px black;
height: 100%;
}
</style>
<body>
<div class="row">
<div class="col_3"></div>
<div class="col_9"></div>
</div>
<div class="row">
<div class="col_6"></div>
<div class="col_6"></div>
</div>
<div class="row">
<div class="col_6"></div>
<div class="col_3"></div>
<div class="col_3"></div>
</div>
<div class="row">
<div class="col_4"></div>
<div class="col_4"></div>
<div class="col_4"></div>
</div>
<div class="row">
<div class="col_3"></div>
<div class="col_3"></div>
<div class="col_3"></div>
<div class="col_3"></div>
</div>
</body>
ex6-4.html의 실행 결과
