요즘 유행하는 레이아웃 중 vGrid(이름이 맞는지 몰라서, jQuery플러그인 이름을 따랐습니다.)라는 레이아웃이 있습니다. jQuery플러그인으로 나온 뒤 많은 사이트에서 사용되고있는 멋진 레이아웃 방법이라고 생각합니다.
이 레이아웃 방식은 박스별로 float을해서 코딩을 하면 position으로 바꿔서 알맞는 위치에 담아주는게 핵심이라고 생각합니다. 문제는 유동적인 박스때문에 javascript를 이용하지 않으면 방법이 없었지만, css3의 속성 중 column을 이용하면 비슷하게나마 구현이 가능한듯합니다.
익스에서는
column을 지원하지 않기 때문에 작동하지 않습니다.
Demo
column에 대해선 다른곳에서도 많이 다뤘기때문에 설명 드리지 않겠습니다.
문제는 div의 높이가 정의 되있지만, column을 세개로 정확하게 나눠버린다는것 입니다.
긴 div박스가 있다면 중간에 짤라서 다음 column에 이어서 보여주게 되는거죠 파이어폭스4 기준으로 붉은색 부분과 파란색 부분이 다음 칸으로 짤려서 올라간 걸 보실수 있습니다.
해결방법
파이어폭스, 오페라의 경우 div에 display속성을 바꿔주시면 해결이됩니다. 여러 속성르 테스트해보진 않았고. inline-block, table두가지 속성을 이용해서 테스트 해본결과 문제 없이 돌아갔습니다.
webkit엔진을 사용하는 브라우저(사파리, 크롬)의 경우에는 더 확실한 방법을 제시해놨습니다. -webkit-column-break-before, -webkit-column-break-after, -webkit-column-break-inside를 이용해 문제를 해결 할수 있더군요.
완성된 Demo
완선된 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의 버그?
하위 div에 opacity값을 줄 경우 -webkit-column-break-before등이 동작하지 못하는 문제가 있습니다.
다른 해결 방법이 있을지 모르겠지만..
몇달간 찾아본 결과 opacity값을 빼는 방법 외에는 다른 방법을 아직 찾지 못했습니다.
더 좋은 방법을 아신다면 피드백 부탁드립니다.ㅋ