How To – 3열 레이아웃

w3.css

3열 레이아웃

CSS를 사용하여 3열 그리드 레이아웃을 만드는 방법을 알아보자.

일반적으로 헤더와 푸터 사이에 3열 그리드 레이아웃을 가장 많이 사용한다.
3열 그리드 레이아웃이 어떻게 생긴 것인지 어떻게 만드는지 알아보자.

3열 레이아웃을 만드는 방법

1단계) HTML 추가

<div class="row">

  <div class="column"></div>

  <div class="column"></div>

</div>

세 개의 동일한 열

.column {

  float: left;

  width: 33.33%;

}

/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}

세 개의 다른 열

.column {

  float: left;

}

.left, .right {

  width: 25%;

}

.middle {

  width: 50%;

}

반응형 3열 레이아웃

@media screen and (max-width: 600px) {

  .column {

    width: 100%;

  }

}