입문) HTML 과 CSS (반응형 12칼럼 그리드 만들기)

그리드 프레임워크 만들기

12칼럼의 단점:  5분의1을 불가함 .

---

기본1 (col col-xs-1 로 12칼럼으로 일괄 적고나서 숫자 부여하기 )

 

HTML

<h1>12칼럼 반응형 그리드</h1>
  <div class="container">123</div>
    <div class="row">
      <div class="col col-xs-6"></div>
      <div class="col col-xs-6"></div>
      
      <div class="col col-xs-3"></div>
      <div class="col col-xs-3"></div>
      <div class="col col-xs-3"></div>
      <div class="col col-xs-3"></div>
      
      <div class="col col-xs-9"></div>
      <div class="col col-xs-3"></div>
      
      <div class="col col-xs-1"></div>
      <div class="col col-xs-5"></div>
      <div class="col col-xs-6"></div>
      
      <div class="col col-xs-12"></div>
    </div>

 

 

CSS

div.container {
  margin:0 auto;
  max-width:980;
}
div.row {
  margin:0 -15px;
}
div.row::after {
  content: "";
  display:block;
  clear:both;
}
div.row > div.col {
  float:left;
  box-sizing:border-box;
  width:100%;
  padding:15px;
}
/*테스트용 코드*/
div.row > div.col::after {
  content: "";
  display:block;
  height:100px;
  background-color:green;
}
div.row > div.col.col-xs-1 {
  width:8.3333%;
}
div.row > div.col.col-xs-2 {
  width:16.6666%;
}
div.row > div.col.col-xs-3 {
  width:25%;
}
div.row > div.col.col-xs-4 {
  width:33.3333%;
}
div.row > div.col.col-xs-5 {
  width:41.6666%;
}
div.row > div.col.col-xs-6 {
  width:50%;
}
div.row > div.col.col-xs-7 {
  width:58.3333%;
}
div.row > div.col.col-xs-8 {
  width:66.6666%;
}
div.row > div.col.col-xs-9 {
  width:75%;
}
div.row > div.col.col-xs-10 {
  width:83.3333%;
}
div.row > div.col.col-xs-11 {
  width:91.6666%;
}
div.row > div.col.col-xs-12 {
  width:100%;
}

---

기본2 (브레이크 포인트 넣기.반응형)

hidden-on-md  == md 에서 숨기는 것

hidden-below-sm == sm 이하로 숨기겠다.

clear-both-below-sm == 새로 줄바꿈

 

HTML

<h1>12칼럼 반응형 그리드</h1>
  <div class="container">123</div>
    <div class="row">
      <div class="col col-xs-12 col-sm-6 col-md-3 col-lg-2 hidden-on-md"></div>
      <div class="col col-xs-12 col-sm-6 col-md-3 col-lg-4 hidden-below-sm"></div>
      <div class="col col-xs-12 col-sm-6 col-md-3 col-lg-2 clear-both-below-sm"></div>
      <div class="col col-xs-12 col-sm-6 col-md-3 col-lg-4"></div>
     <!--
      <div class="col col-xs-3"></div>
      <div class="col col-xs-3"></div>
      
      <div class="col col-xs-9"></div>
      <div class="col col-xs-3"></div>
      
      <div class="col col-xs-1"></div>
      <div class="col col-xs-5"></div>
      <div class="col col-xs-6"></div>
      
      <div class="col col-xs-12"></div>
      -->
    </div>

 

CSS

div.container {
  margin:0 auto;
  max-width:980;
}
div.row {
  margin:0 -15px;
}
div.row::after {
  content: "";
  display:block;
  clear:both;
}
div.row > div.col {
  float:left;
  box-sizing:border-box;
  width:100%;
  padding:15px;
}
/*테스트용 코드*/
div.row > div.col::after {
  content: "";
  display:block;
  height:100px;
  background-color:green;
} /*테스트용 코드*/

div.row > div.col.col-xs-1 {
  width:8.3333%;
}
div.row > div.col.col-xs-2 {
  width:16.6666%;
}
div.row > div.col.col-xs-3 {
  width:25%;
}
div.row > div.col.col-xs-4 {
  width:33.3333%;
}
div.row > div.col.col-xs-5 {
  width:41.6666%;
}
div.row > div.col.col-xs-6 {
  width:50%;
}
div.row > div.col.col-xs-7 {
  width:58.3333%;
}
div.row > div.col.col-xs-8 {
  width:66.6666%;
}
div.row > div.col.col-xs-9 {
  width:75%;
}
div.row > div.col.col-xs-10 {
  width:83.3333%;
}
div.row > div.col.col-xs-11 {
  width:91.6666%;
}
div.row > div.col.col-xs-12 {
  width:100%;
}
@media (min-width: 768px) {
  div.row > div.col.col-sm-1 {
  width:8.3333%;
}
div.row > div.col.col-sm-2 {
  width:16.6666%;
}
div.row > div.col.col-sm-3 {
  width:25%;
}
div.row > div.col.col-sm-4 {
  width:33.3333%;
}
div.row > div.col.col-sm-5 {
  width:41.6666%;
}
div.row > div.col.col-sm-6 {
  width:50%;
}
div.row > div.col.col-sm-7 {
  width:58.3333%;
}
div.row > div.col.col-sm-8 {
  width:66.6666%;
}
div.row > div.col.col-sm-9 {
  width:75%;
}
div.row > div.col.col-sm-10 {
  width:83.3333%;
}
div.row > div.col.col-sm-11 {
  width:91.6666%;
}
div.row > div.col.col-sm-12 {
  width:100%;
}
}


@media (min-width:992px) {
    div.row > div.col.col-md-1 {
  width:8.3333%;
}
div.row > div.col.col-md-2 {
  width:16.6666%;
}
div.row > div.col.col-md-3 {
  width:25%;
}
div.row > div.col.col-md-4 {
  width:33.3333%;
}
div.row > div.col.col-md-5 {
  width:41.6666%;
}
div.row > div.col.col-md-6 {
  width:50%;
}
div.row > div.col.col-md-7 {
  width:58.3333%;
}
div.row > div.col.col-md-8 {
  width:66.6666%;
}
div.row > div.col.col-md-9 {
  width:75%;
}
div.row > div.col.col-md-10 {
  width:83.3333%;
}
div.row > div.col.col-md-11 {
  width:91.6666%;
}
div.row > div.col.col-md-12 {
  width:100%;
}
}

@media (min-width:1200px) {
    div.row > div.col.col-lg-1 {
  width:8.3333%;
}
div.row > div.col.col-lg-2 {
  width:16.6666%;
}
div.row > div.col.col-lg-3 {
  width:25%;
}
div.row > div.col.col-lg-4 {
  width:33.3333%;
}
div.row > div.col.col-lg-5 {
  width:41.6666%;
}
div.row > div.col.col-lg-6 {
  width:50%;
}
div.row > div.col.col-lg-7 {
  width:58.3333%;
}
div.row > div.col.col-lg-8 {
  width:66.6666%;
}
div.row > div.col.col-lg-9 {
  width:75%;
}
div.row > div.col.col-lg-10 {
  width:83.3333%;
}
div.row > div.col.col-lg-11 {
  width:91.6666%;
}
div.row > div.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
}
}

---

https://codepen.io/jungjoyjung/pen/LYXWgNQ?editors=1100