Hello, budding web developers! If you’ve been exploring ways to display content dynamically and visually, you’ve probably come across a layout that looks like a well-organized pile of bricks—like a Pinterest board. This layout style is known as “masonry,” and in this tutorial, we’ll dive into creating a blog layout using Masonry.js.
What Is Masonry Layout?
Masonry dynamically positions your items based on available vertical space, much like a stone mason stacking bricks. It’s perfect for showcasing content varieties like blog posts, images, or products in a visually appealing flow.
Step 1: Setting Up Your Project
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masonry Blog Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid">
<div class="grid-item">Post 1</div>
<div class="grid-item">Post 2</div>
<div class="grid-item">Post 3</div>
<!-- Add more grid-items as needed -->
</div>
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Adding CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.grid {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.grid-item {
background-color: #f0f0f0;
margin-bottom: 20px;
padding: 20px;
box-sizing: border-box;
border-radius: 5px;
width: 48%;
}
@media (min-width: 768px) {
.grid-item {
width: 31%;
}
}
Step 2: Using Masonry.js
Initialize Masonry
document.addEventListener('DOMContentLoaded', function () {
const grid = document.querySelector('.grid');
const masonry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true
});
});
Step 3: Customizing Your Layout
Adding Content
<div class="grid-item">
<img src="https://source.unsplash.com/random/300x200" alt="Random Image">
<h2>Blog Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
</div>
Tweak and Tinker
const masonry = new Masonry(grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true,
gutter: 20
});
Conclusion
And there you have it! You’ve created a beautiful, responsive blog layout using Masonry.js. This layout technique is perfect for portfolios, galleries, or dynamic content lists.
Practice Ideas
- Change the size or colors of your grid items and observe layout behavior.
- Try different content types: images, videos, quotes, etc.
- Experiment with Masonry options like
transitionDurationandgutter.
Thanks for joining me on this coding journey! Be sure to share your creations or questions on sagarkunwar.com.np. Happy coding!