Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. For example, http://www.erikjohanssonphoto.com/work Today,I gonna try this plugIn with fashion topic. When I narrow the browser, the images turn into two columns which are responsible to the browser size. Here is the code part: HTML I'll use Masonry.js in the rightArea, loading in different height images through json. SCSS: I built a scss file to complete the styling part. This main section is styling each kind of grid. JS: First,I apply the masonry on .grid div in the HTML. Either columnWidth needs to be set to a fixed size, like columnWidth: 120 , or items need to have a fixed size in pixels, like width: 120px . isFitWidth makes every column same width which looks neat. gutter makes some space between eac