I need assistance with positioning a specific div at the center of a 3x3 grid. Currently, this div is appearing as the last item in the grid.
The div elements are being generated through an event listener that triggers a function containing a for loop.
function displayDino(){
for (var i = 0; i < dinoData.length; i++) {
const dinoDiv = document.createElement('div');
dinoDiv.className = 'grid-item';
dinoDiv.innerHTML = `<h3>${dinoData[i]["species"]}<h3><img src="images/${(dinoData[i]["species"].toLowerCase())}.png"><p>${dinoData[i]["fact"]}</p>`;
document.getElementById('grid').appendChild(dinoDiv);
}
}
Additionally, I have another function that appends a different div to the grid:
function displayHuman(){
const humanDiv = document.createElement('div');
humanDiv.className = 'grid-item';
humanDiv.innerHTML = `<h3>${human.name()}<h3><img src="images/human.png">`;
document.getElementById('grid').appendChild(humanDiv);
}
Is there a way to generate this grid while ensuring that a specific div is always centered within it?
Thank you in advance for any assistance provided!