masonry image gallery
The main purpose of this project was to create a image layout gallery using the masonry plugin that can be used in both a desktop and mobile environment.
skills
- web design
- web development
technologies
- masonry.js
- html
- css
- javascript
html
The HTML used in this project was simple div nests to create cards that contained an image, description and authors name as well as a category and date for the "post". These cards were set up in an overarching container to prepare them for use with Masonry.

javascript
The options for Masonry was the only written JavaScript used in this project. Each column within the masonry element was given a width of 175px and each image was resized in height and layout according to their size in relation to the given width. Masonry handles the layout on resize as well, allowing for a resize to a mobile, and smaller desktop resolution layout dynamically.

view the live site here