How To – 4열 레이아웃

w3.css

4열 레이아웃

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

보통 카테고리 / 아카이브 / 갤러리 페이지에서 많이 사용되는 레이아웃이다.

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

1단계) HTML 추가

<div class="row">

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

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

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

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

</div>

2단계) CSS 추가

이 예에서는 4개의 열로 구성된 레이아웃을 생성한다.

.column {

  float: left;

  width: 25%;

}

.row:after {

  content: "";

  display: table;

  clear: both;

}

이 예에서는 반응형 4열 레이아웃을 만들어 보자.

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

  .column {

    width: 100%;

  }

}