gridstack demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/style.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.0.0/dist/gridstack.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/gridstack@2.0.0/dist/gridstack.all.js"></script>
    
</head>
<body>
<style>
   
</style>
<div>
    <div class="grid-stack">
        <div class="grid-stack-item"
             data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content">
                <div class="itemcard">
                    Item 1
                </div>
            </div>
        </div>
        <div class="grid-stack-item"
             data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content">
                <div class="itemcard">
                    Item 2
                </div>
            </div>
        </div>
        <div class="grid-stack-item"
             data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content">
                <div class="itemcard">
                    Item 3
                </div>
            </div>
        </div>
        <div class="grid-stack-item"
             data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content">
                <div class="itemcard">
                    Item 4
                </div>
            </div>
        </div>
        <div class="grid-stack-item"
             data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content">
                <div class="itemcard">
                    Item 5
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="lib/script.js"></script>
</html>

.itemcard {
    height: 20rem;
    width: 30rem;
    background-color: cadetblue;
}

.grid-stack>.grid-stack-item>.ui-resizable-se, .grid-stack>.grid-stack-item>.ui-resizable-sw {
    background-size: contain;
    background-image: url("resize4.png") !important;
    transform: rotate(0deg);
    width: 11px;
    height: 13px;
    bottom: 10px !important;
}

.grid-stack-item-content {
    color: white;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    text-align: center;
}
.grid-stack>.grid-stack-item>.grid-stack-item-content{
    overflow-y: hidden !important;
}


.grid-stack > .grid-stack-item > .grid-stack-item-content::-webkit-scrollbar {
    display: none;
}

// Add your code here

  let options = {
        column: 12,
        minRow: 1, // don't collapse when empty
        cellHeight: 70,
        disableOneColumnMode: true,
        float: false,
    };
    var grid = GridStack.init(options);
    function resizeGrid() {
        let width = document.body.clientWidth;
        if (width < 700) {
            grid.column(1);
        } else if (width < 850) {
            grid.column(3);
        } else if (width < 950) {
            grid.column(6);
        } else if (width < 1100) {
            grid.column(8);
        } else {
            grid.column(12);
        }
    }
    resizeGrid();

    window.addEventListener('resize', function() {resizeGrid()});