CSS 그리드

1 개요[ | ]

CSS grid system
CSS 그리드 시스템; CSS 그리드

많은 웹 페이지들은 그리드뷰 형태로 만들어져 있음
div와 같은 하나의 행(row) 블럭을 여러 개의 컬럼(col) 블럭으로 구성하는 구조
흔히 반응형 웹의 기본기능으로 활용됨

넓은 화면에서는 컬럼 수를 늘리고, 좁은 화면에서는 컬럼 수를 줄일 수 있음

부트스트랩 그리드 사례가 사실상의 표준

하나의 row를 최대 12개의 컬럼으로 나눔

2 예시[ | ]

<style>
/* 그리드 CSS */
* { box-sizing: border-box; }
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  width: 100%;
}
@media (max-width: 600px) {
  .col-m-0 {display: none;}
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
}
@media (min-width: 601px) {
  .col-0 {display: none;}
  .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%;}
}

/* 데모용 색상 지정 */
.row>div:nth-child(2n+1) { background:red; }
.row>div:nth-child(2n+2) { background:orange; }
.row>div:nth-child(2n+3) { background:yellow; }
</style>

<h3>비반응형 (비율 그대로)</h3>
<div class="row">
  <div class="col-3 col-m-3">3</div>
  <div class="col-9 col-m-9">9</div>
</div>
<h3>반응형 - 기본 (모바일 너비 100%)</h3>
<div class="row">
  <div class="col-3">3</div>
  <div class="col-9">9</div>
</div>
<h3>반응형 - 커스텀 (모바일 너비 지정)</h3>
<div class="row">
  <div class="col-3 col-m-12">3 m-12</div>
  <div class="col-6 col-m-6">6 m-6</div>
  <div class="col-3 col-m-6">3 m-6</div>
</div>

3 같이 보기[ | ]

4 참고[ | ]