Как создать динамический макет c DILV из списка jQuery

Question

Я пытаюсь создать свой макет на странице. Я хочу построить что-то вроде этого:

Я пытаюсь сделать это несколькими способами, но я не нашел решения.

Я пытаюсь использовать такой метод, но для меня это не работает:

var areaList = [
    { name: "area1", color: "#f3d33a", width: 540, height: 400 }
]

function createAreas() {
    $(areaList).each(function (i, data) {
        console.log(data.color)
        splitAreas(data.color, data.width, data.height)
        var objects = `
<div class="col-4">
<div class="areas">
</div>
</div>`

        $(".container").append(objects);
    });
}

function splitAreas(color, width, height) {
    console.log(color, width, height)
    $(".areas").css("background-color", "yellow")
    $(".areas").css("width", width + "px")
    $(".areas").css("height", height + "px")
}