Enable Dark Mode!
how-to-create-responsive-grid-layouts-with-gridstack.jpg
By: Hafeesul Ali

How to Create Responsive Grid Layouts With Gridstack

Technical

Responsive web design has become a cornerstone of modern web development, ensuring that websites are accessible and visually appealing across a myriad of devices. GridStack, a JavaScript library, stands out as a versatile tool for creating responsive grid layouts with ease. In this comprehensive guide, we will explore the practical implementation of GridStack using a simple example, delving into the code, customization options, and advanced features.

Example

Let's start by dissecting the example HTML code. The document includes the necessary components: the GridStack library and stylesheet from a Content Delivery Network (CDN), custom styling, and a script section for initializing the grid and loading predefined items.

<!DOCTYPE html>
<html>
<head>
    <title>GridStack Example</title>
    <link href="https://unpkg.com/gridstack/dist/gridstack.min.css" rel="stylesheet" />
    <style type="text/css">
        .grid-stack {
            background: #FAFAD2;
        }
        .grid-stack-item-content {
            background-color: #18BC9C;
        }
    </style>
</head>
<body>
    <div class="grid-stack"></div>
    <script src="https://unpkg.com/gridstack/dist/gridstack-all.js"></script>
    <script>
        var items = [
            { content: 'my first widget' },
            { w: 2, content: 'another longer widget!' },
            { h: 0, w: 3, content: 'another widget!' }
        ];
        var grid = GridStack.init();
        grid.load(items);
    </script>
</body>
</html>

Dissecting the Code :

* Linking Stylesheets and Scripts: The example kicks off by linking to the GridStack stylesheet and JavaScript file from a CDN. These files provide the necessary styles and functionalities for creating grid layouts.

* Custom Styling: A touch of custom styling is applied to enhance the aesthetics. The grid container gets a light yellow background (background: #FAFAD2;), and individual item content is adorned with a greenish hue (background-color: #18BC9C;).

* Grid Initialization: The grid structure is represented by the <div class="grid-stack"></div> element. GridStack is initialized in the script section using var grid = GridStack.init();.

* Loading Items onto the Grid: Predefined items are declared in the items array, specifying content, width (w), and height (h). The grid.load(items); command populates the grid with these items upon initialization.

Responsive Grid Setup:

Let's enhance the responsiveness of our grid by ensuring it adapts to different screen sizes. We'll use media queries to adjust the number of columns based on the screen width.

<style type="text/css">
    .grid-stack {
        background: #FAFAD2;
    }
    .grid-stack-item-content {
        background-color: #18BC9C;
    }
    /* Responsive Grid Layout */
    @media (min-width: 768px) {
        .grid-stack {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (min-width: 992px) {
        .grid-stack {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media (min-width: 1200px) {
        .grid-stack {
            grid-template-columns: repeat(4, 1fr);
        }
    }
</style>

This CSS introduces media queries that modify the number of columns as the screen size increases, creating a more responsive grid layout.

Adding Interactivity

Let's make our grid interactive by enabling users to add new items dynamically. We'll include a button to trigger the addition of a new item.

<body>
    <div class="grid-stack"></div>
    <button onclick="addItem()">Add New Item</button>
    <script>
        // ... (previous script code)
        function addItem() {
            var newItem = { content: 'New Widget' };
            grid.addWidget(newItem);
        }
    </script>
</body>

Now, when the "Add New Item" button is clicked, a new widget with the specified content will be dynamically added to the grid.

By following these steps, you've created a responsive grid layout using GridStack, added interactivity, and explored some advanced features. Feel free to further customize and experiment with GridStack to suit your specific project requirements.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message