[CSS] 반응형 그리드 프레임워크 만들기
HTML
<h1>12칼럼 반응형 그리드 프레임워크 만들기</h1>
<div class="container">
<div class="row">
<div class="col col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
<div class="col col-xs-12 col-sm-6 col-md-3 col-lg-4 clear-both-below-sm"></div>
<div class="col col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
<div class="col col-xs-12 col-sm-6 col-md-3 col-lg-4 hidden-on-md hidden-below-sm"></div>
</div>
</div>
CSS
div.container{
margin: 0 auto;
max-width: 980px;
}
div.row{
margin: 0 -15px;
}
.row::after{
content:"";
display: block;
clear: both;
}
.row > .col{
float: left;
box-sizing: border-box;
width: 100%;
padding: 15px;
}
/* 모바일 */
.row > .col.col-xs-1{
width: 8.3333%;
}
.row > .col.col-xs-2{
width: 16.6666%;
}
.row > .col.col-xs-3{
width: 25%;
}
.row > .col.col-xs-4{
width: 33.3333%;
}
.row > .col.col-xs-5{
width: 41.6666%;
}
.row > .col.col-xs-6{
width: 50%;
}
.row > .col.col-xs-7{
width: 58.3333%;
}
.row > .col.col-xs-8{
width: 66.6666%;
}
.row > .col.col-xs-9{
width: 75%;
}
.row > .col.col-xs-10{
width: 83.3333%;
}
.row > .col.col-xs-11{
width: 91.6666%;
}
.row > .col.col-xs-12{
width: 100%;
}
@media(min-width: 768px){
.row > .col.col-sm-1{
width: 8.3333%;
}
.row > .col.col-sm-2{
width: 16.6666%;
}
.row > .col.col-sm-3{
width: 25%;
}
.row > .col.col-sm-4{
width: 33.3333%;
}
.row > .col.col-sm-5{
width: 41.6666%;
}
.row > .col.col-sm-6{
width: 50%;
}
.row > .col.col-sm-7{
width: 58.3333%;
}
.row > .col.col-sm-8{
width: 66.6666%;
}
.row > .col.col-sm-9{
width: 75%;
}
.row > .col.col-sm-10{
width: 83.3333%;
}
.row > .col.col-sm-11{
width: 91.6666%;
}
.row > .col.col-sm-12{
width: 100%;
}
}
@media(min-width: 992px){
.row > .col.col-md-1{
width: 8.3333%;
}
.row > .col.col-md-2{
width: 16.6666%;
}
.row > .col.col-md-3{
width: 25%;
}
.row > .col.col-md-4{
width: 33.3333%;
}
.row > .col.col-md-5{
width: 41.6666%;
}
.row > .col.col-md-6{
width: 50%;
}
.row > .col.col-md-7{
width: 58.3333%;
}
.row > .col.col-md-8{
width: 66.6666%;
}
.row > .col.col-md-9{
width: 75%;
}
.row > .col.col-md-10{
width: 83.3333%;
}
.row > .col.col-md-11{
width: 91.6666%;
}
.row > .col.col-md-12{
width: 100%;
}
}
@media(min-width: 1200px){
.row > .col.col-lg-1{
width: 8.3333%;
}
.row > .col.col-lg-2{
width: 16.6666%;
}
.row > .col.col-lg-3{
width: 25%;
}
.row > .col.col-lg-4{
width: 33.3333%;
}
.row > .col.col-lg-5{
width: 41.6666%;
}
.row > .col.col-lg-6{
width: 50%;
}
.row > .col.col-lg-7{
width: 58.3333%;
}
.row > .col.col-lg-8{
width: 66.6666%;
}
.row > .col.col-lg-9{
width: 75%;
}
.row > .col.col-lg-10{
width: 83.3333%;
}
.row > .col.col-lg-11{
width: 91.6666%;
}
.row > .col.col-lg-12{
width: 100%;
}
}
@media(min-width: 768px) and (max-width: 991px){
.hidden-on-md{
display: none;
}
}
@media(max-width: 991px){
.hidden-below-sm{
display: none;
}
.clear-both-below-sm{
clear: both;
}
}
/* 테스트용 코드 */
.row > .col::after{
content:"";
display: block;
height: 100px;
background-color: gray;
}