[OpenSource] CSS Masonry 박스

참으로 CSS의 발전은 날로 빨라지고 있다.

Simple Masonry Layout With Flexbox는 JQuery Masonry 와 같은 기능 구현한 CSS 오픈소스다.

한마로 표현하자면, GOOD이다.

소스 또한 심플하다.

CSS 소스

body { 

  margin: 0; background: #131212;  

} 

div#masonry { 

  display: flex; 

  flex-direction: column; 

  flex-wrap: wrap;

  height: 100vw;

  max-height: 800px;

  font-size: 0;  

}

div#masonry img {  

  width: 33.3%;

  transition: .8s opacity;

} 

div#masonry:hover img { opacity: 0.3; }

div#masonry:hover img:hover { opacity: 1; } 

/* fallback for earlier versions of Firefox */

@supports not (flex-wrap: wrap) {

  div#masonry { display: block; }

  div#masonry img {  

  display: inline-block;

  vertical-align: top;

  }

}

HTML 소스

<div id="masonry">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg">

</div>

너무 심플하지 않은가?

나도 CSS는 좀 알고 있다고 생각했는데, 이 소스보고 뛰는 놈위에 나는 놈 있다는 속담에 공감한다.

SOURCE LINK