Javascript foreach Object

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="app">
        <h3>Javascript loop through array of objects</h3>
        <div id="gridWrapper"></div>
    </div>
    <script>
        var cardData = [
            { title: 'Card 1', background_color: '#D32F2F' },
            { title: 'Card 2', background_color: '#F48FB1' },
            { title: 'Card 3', background_color: '#AD1457' },
            { title: 'Card 4', background_color: '#D50000' },
            { title: 'Card 5', background_color: '#C51162' },
            { title: 'Card 6', background_color: '#FF80AB' }
        ];

var gridWrapper = document.getElementById('gridWrapper');

cardData.forEach(function (cardItem) {
            var card = `
                <div class="col">
                    <div class="card" style="background-color: ${cardItem.background_color};">
                        <div class="card-body">
                            <h5 class="card-title text-center">${cardItem.title}</h5>
                        </div>
                    </div>
                </div>
            `;

gridWrapper.innerHTML += card;
        });
    </script>
    <style>
        #app {
            margin: 0 auto;
            width: 800px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            text-align: center;
            padding: 20px
        }

#gridWrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            justify-items: center;
        }

.card {
            border: 1px solid #ccc;
            padding: 20px;
            text-align: center;
            background-color: #fff;
            border-radius: 4px;
            width: 180px;
        }

h5 {
            color: #333;
            margin-top: 0;
        }
    </style>
</body>

</html>