Html & Css

A Comprehensive Guide to Creating a Masonry Layout with CSS and JavaScript

0

Masonry layouts, as seen on Pinterest, are irregular grid layouts that ensure items do not overlap. This allows content to be arranged more efficiently, offering a visually appealing design to users. Today, we will delve into how to implement a Masonry layout using CSS and JavaScript.

1. Using CSS Grid and JavaScript

This method combines CSS Grid and JavaScript libraries to create a Masonry layout.

HTML Structure

First, write the HTML structure to apply the Masonry layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masonry Layout</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
</head>
<body>
    <div class="grid">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <!-- More items -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling

Define the basic styles for grid items in the CSS file.

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.grid {
    display: flex;
    width: 100%;
}

.grid-item {
    width: 30%;
    margin-bottom: 16px;
    background-color: #bada55;
    padding: 16px;
    border: 1px solid #ddd;
    font-size: 24px;
    box-sizing: border-box;
}

JavaScript Initialization

Initialize the Masonry layout in the JavaScript file.

// script.js
document.addEventListener('DOMContentLoaded', function () {
    var grid = document.querySelector('.grid');
    var msnry = new Masonry(grid, {
        // options
        itemSelector: '.grid-item',
        columnWidth: '.grid-item',
        percentPosition: true
    });
});

2. Using CSS Columns

CSS Columns can also be used to create a Masonry layout. This method can be implemented with just CSS, without JavaScript.

HTML Structure

Include the grid items in the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masonry Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="masonry">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <!-- More items -->
    </div>
</body>
</html>

CSS Styling

Implement the Masonry layout using CSS Columns in the CSS file.

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.masonry {
    column-count: 3;
    column-gap: 16px;
}

.item {
    background-color: #bada55;
    padding: 16px;
    margin-bottom: 16px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

Conclusion

  • CSS Grid and JavaScript: Using CSS Grid to create the basic grid structure and the `masonry-layout` library to dynamically adjust the placement of each item with JavaScript. This method enhances layout stability and adapts to various screen sizes.
  • CSS Columns: Implementing the Masonry layout using CSS Columns. This method is simple as it does not require JavaScript, but it has the drawback of potentially altering the order of items.

In this guide, we explored how to create a Masonry layout using CSS and JavaScript. The method combining CSS Grid and JavaScript is more stable and works well across different browsers. The CSS Columns method is simpler but suitable for cases where item order is not crucial. Choose the appropriate method for your needs to implement a Masonry layout effectively.

Leave a Reply