column을 이용한 vGrid따라하기

요즘 유행하는 레이아웃 중 vGrid(이름이 맞는지 몰라서, jQuery플러그인 이름을 따랐습니다.)라는 레이아웃이 있습니다. jQuery플러그인으로 나온 뒤 많은 사이트에서 사용되고있는 멋진 레이아웃 방법이라고 생각합니다.

이 레이아웃 방식은 박스별로 float을해서 코딩을 하면 position으로 바꿔서 알맞는 위치에 담아주는게 핵심이라고 생각합니다. 문제는 유동적인 박스때문에 javascript를 이용하지 않으면 방법이 없었지만, css3의 속성 중 column을 이용하면 비슷하게나마 구현이 가능한듯합니다.

익스에서는 column을 지원하지 않기 때문에 작동하지 않습니다.

Demo

height: 70px
height: 50px
height: 40px
height: 60px
height: 90px
height: 100px

column에 대해선 다른곳에서도 많이 다뤘기때문에 설명 드리지 않겠습니다.

문제는 div의 높이가 정의 되있지만, column을 세개로 정확하게 나눠버린다는것 입니다.
div박스가 있다면 중간에 짤라서 다음 column에 이어서 보여주게 되는거죠 파이어폭스4 기준으로 붉은색 부분과 파란색 부분이 다음 칸으로 짤려서 올라간 걸 보실수 있습니다.

해결방법

파이어폭스, 오페라의 경우 divdisplay속성을 바꿔주시면 해결이됩니다. 여러 속성르 테스트해보진 않았고. inline-block, table두가지 속성을 이용해서 테스트 해본결과 문제 없이 돌아갔습니다.
webkit엔진을 사용하는 브라우저(사파리, 크롬)의 경우에는 더 확실한 방법을 제시해놨습니다. -webkit-column-break-before, -webkit-column-break-after, -webkit-column-break-inside를 이용해 문제를 해결 할수 있더군요.

완성된 Demo

height: 70px
height: 50px
height: 40px
height: 60px
height: 90px
height: 100px

완선된 Code

[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ko” lang=”ko”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title> new document </title>
<style media=”screen, print” type=”text/css”>
.vGrid { -moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:10px; -webkit-column-gap:10px; column-gap:10px; }
.vGrid div { -webkit-column-break-before:always; display:inline-block; width:100%; margin-bottom:10px; background-color:#dadad9; }
.vGrid .item1 { height:70px; }
.vGrid .item2 { height:50px; }
.vGrid .item3 { height:40px; background-color:red; }
.vGrid .item4 { height:60px; }
.vGrid .item5 { height:90px; background-color:blue; }
.vGrid .item6 { height:100px; }
</style>
</head>
<body>
<div class=”vGrid”>
<div class=”item1″>height: 70px</div>
<div class=”item2″>height: 50px</div>
<div class=”item3″>height: 40px</div>
<div class=”item4″>height: 60px</div>
<div class=”item5″>height: 90px</div>
<div class=”item6″>height: 100px</div>
</div>
</body>
</html>
[/html]

webkit의 버그?

하위 divopacity값을 줄 경우 -webkit-column-break-before등이 동작하지 못하는 문제가 있습니다.
다른 해결 방법이 있을지 모르겠지만..
몇달간 찾아본 결과 opacity값을 빼는 방법 외에는 다른 방법을 아직 찾지 못했습니다.

더 좋은 방법을 아신다면 피드백 부탁드립니다.ㅋ

Published by Bathory

안녕하세요.

Leave a comment

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다