css rwd grid

반응형을 위한 그리드. 보통 12개의 칼럼으로 나뉘며, 칼럼중 1개만 차지할때, 2개를 차지할때 이런 식으로 넓이를 지정해 주면 된다. 각각의 col들은 모두 float: left; 되어야 한다.

 

 

.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;
}

 

 

각각 칼럼은 하나의 row (가로 줄) 안에 위치한다. 그리고, 그 row에는 clear:both를 적용시켜 그 row의 height값을 지킬 수 있다.

 

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

 

.row::after {
    content: "";
    clear: both;
    display: table;
}