[Frontend/CSS] Grid 스타일을 만드는 방법 (반응형)

 

1단 / 2단 / 3단 / 4단 레이아웃을 기준으로 미디어 쿼리를 적용을 해봤습니다.

조금씩 개선해 나갈 예정입니다.

헤더가 막 다음줄로 내려가기도 해서 .. ㅠ 반응형으로 그리드 시스템을 만드는건 너무 무모한건지 ...

 

See the Pen Pure CSS - Grid System by 홍지성 (@lnbvocxe) on CodePen.

 

 

 

 

 

HTML 코드

<section class="row">
  <div class="col-12"></div>
</section>
<section class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</section>
<section class="row">
  <div class="col-4"></div>
  <div class="col-4"></div>
  <div class="col-4"></div>
</section>
<section class="row">
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
</section>

 

 

SCSS 코드

%clearfix:after {
  display:block;
  clear:both;
  content:'';
}

$grid-spacing:3%;

.row { 
  @extend %clearfix;
  & + & {
    margin-top:$grid-spacing;
  }
}

[class^="col-"] {
  float:left;
  margin-right: $grid-spacing;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  &:last-child {
    margin-right:0%;
  }
}

div {
  height: 100px;
  background-color: green;
}

// 웹 (12)
.col-1   {width:(100% / 12) - ($grid-spacing * 11 / 12);}
.col-2   {width:(100% / 6) - ($grid-spacing * 10 / 12);} 
.col-3   {width:(100% / 4) - ($grid-spacing * 9 / 12);} // 절반
.col-4   {width:(100% / 3) - ($grid-spacing * 8 / 12);}
.col-5   {width:(100% / 2.4) - ($grid-spacing * 7 / 12);}
.col-6   {width:(100% / 2) - ($grid-spacing * 6 / 12);}
.col-7   {width:(100% / 1.714285714285714) - ($grid-spacing * 5 / 12);}
.col-8   {width:(100% / 1.5) - ($grid-spacing * 4 / 12);}
.col-9   {width:(100% / 1.333333333333333) - ($grid-spacing * 3 / 12);}
.col-10  {width:(100% / 1.2) - ($grid-spacing * 2 / 12);}
.col-11  {width:(100% / 1.090909090909091) - ($grid-spacing * 1 / 12);}
.col-12  {width:100%;}

// 태블릿 (8)
@media only screen and (max-width: 768px) {
  .col-3 {width:(100% / 2) - ($grid-spacing * 6 / 12); &:nth-child(2n){margin-right: 0%;}}
  .col-4 ,
  .col-5 ,
  .col-6 ,
  .col-7 ,
  .col-8 ,
  .col-9 ,
  .col-10,
  .col-11,
  .col-12  {width:100%;}
}

// 모바일 (4)
@media only screen and (max-width: 360px) {
  .col-1 ,
  .col-2 ,
  .col-3 ,
  .col-4 ,
  .col-5 {width:100%;}
}

 

 

CSS 코드

.row:after {
  display: block;
  clear: both;
  content: ''; 
}

.row + .row {
  margin-top: 3%;
}

[class^="col-"] {
  float: left;
  margin-right: 3%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

[class^="col-"]:last-child {
  margin-right: 0%; 
}

div {
  height: 100px;
  background-color: rgb(233, 81, 238);
}

.col-1 {
  width: 5.58333%; 
}

.col-2 {
  width: 14.16667%; 
}

.col-3 {
  width: 22.75%; 
}

.col-4 {
  width: 31.33333%; 
}

.col-5 {
  width: 39.91667%; 
}

.col-6 {
  width: 48.5%; 
}

.col-7 {
  width: 57.08333%; 
}

.col-8 {
  width: 65.66667%; 
}

.col-9 {
  width: 74.25%; 
}

.col-10 {
  width: 82.83333%; 
}

.col-11 {
  width: 91.41667%; 
}

.col-12 {
  width: 100%; 
}

@media only screen and (max-width: 768px) {
  .col-3 {
    width: 48.5%; 
  }
  .col-3:nth-child(2n) {
    margin-right: 0%; 
  }
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: 100%; 
  }
}

@media only screen and (max-width: 360px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5 {
    width: 100%; 
  }
}