웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Masonry Grid with CSS Column 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] Masonry Grid with CSS Column

해피CGI윤실장 2021. 5. 20. 09:24

Css를 이용한 Masonry Grid 디자인 갤러리입니다.
css의 column옵션을 이용해서 디자인되고 있으며 css column 속성은 브라우저별 접두사를 붙여 사용해야 합니다.

크롬,사파리 -webkit-
파이어폭스 -moz-
오페라 -o-
익스플로러 -ms- (11,엣지 제외)

column 옵션을 이용해서 단의 디자인을 구성하고 있으며 이미지 크기를 100%로 지정하여 해당 효과가 구현이되어 있습니다.

 


데모보기를 클릭하시면 결과물을 확인하실 수 있습니다.
최신버전의 브라우저에서만 동작이 됩니다^^

 

 

 

홈페이지바로가기

Comments