[immortal727]

Дан объект

let Fields = {
    cat: {
        title: "Кот",
        img:"img/cat.jpg"
    },
    book: {
        title: "Книга",
        img:"img/book.jpg"
    },
    car: {
        title: "Машина",
        img: "img/car.jpg",
    }
}

Никак не могу понять, как же сформировать ячейки n x n, да при том еще и рандомно выводить в них информацию из объекта, ведь там всего лишь три свойства.

function generateField(object, section, max) {
    //let n = randomInteger(3, max);
    let n = max;
    section.style.cssText = `
        grid-template-columns:repeat(${n},1fr);
        grid-template-rows:repeat(${n},1fr);`
        ;

    for (let i = 0; i < max * max; i++) {
        for (let item in object) {
            let block = document.createElement("div");
            let title = document.createElement("h2");
            title.innerText = object[item].title;
            let pic = document.createElement("img");
            pic.setAttribute("src", object[item].img);
            // В наш блок div добавили заголовок и картинку
            block.append(title, pic);
            // Добавили уже в самый верхний блок grid всё его содержимое
            //section.appendChild(block);
        }
       // section.appendChild(block)[i];
    }
   // section.дочерние_элементы[рандомный_индекс]
}   

function randomInteger(min, max) {
    // случайное число от min до (max+1)
    let rand = min + Math.random() * (max + 1 - min);
    return Math.floor(rand);
}

let section = document.querySelector(".GameField");
generateField(Fields, section, 5);

Чтоб много не выводить квадратиков я указал пока конкретное число.

В html все просто, пустой div с классом GameField
В Css
.GameField {
display: grid;
grid-gap: 15px;
grid-auto-flow: dense;
}
Помогите определиться как же нужно эту задачку решить?