Masonry Layout | Pinterest Like Layout

A responsive Masonry Layout inspired by Pinterest's grid-style design for showcasing visual content.

Table of Contents

• Demo
• Tech Stack
• Features
• Installation
• Usage
• License

Demo

View Live Demo

Tech Stack

The technologies and tools used in this project include:

HTML5: Used for structuring the content of the webpage.

CSS3: Styled the layout, fonts, and colors.

JavaScript: Implemented interactivity and Masonry layout.

MasonryJs: A JavaScript library for creating the masonry grid layout.

ImagesLoadedJs: A JavaScript library to ensure all images are loaded before arranging the grid.

Download

1. MasonryJs:
2. ImagesLoadedJs

Features

• Responsive grid layout for showcasing images and visual content.
• Masonry style arrangement of items, making efficient use of available space.
• Easy-to-customize CSS for design modifications.
• Auto-update copyright year.
• Tech stack includes HTML, CSS, and JavaScript libraries.

Installation

To get started with this project, follow these steps:

1. Clone this repository:

   git clone https://github.com/your-username/masonry-layout.git

2. Navigate to the project directory:

   cd masonry-layout

3. Open index.html in your browser to view the project locally.

Usage

To use and integrate this Masonry Layout into your own project, follow these guidelines:

1. Copy the relevant HTML and CSS code from this repository.
2. Modify the HTML structure and CSS styles as needed.
3. Ensure you include the necessary JavaScript libraries (masonry.pkgd.min.js and imagesloaded.pkgd.min.js) for the layout to work correctly.
4. Customize your content and images within the grid as per your requirements.

Feel free to refer to the code and examples provided in this repository for guidance.

License

This project is open-source and available under the MIT License. You are free to use, modify, and distribute the code as per the terms of this license.