<div id="container"></div
#container {
height:100vh;
display:flex;
align-content: center;
justify-content: center;
flex-wrap:wrap;
gap: 1rem;
}
.div-style {
display:flex;
align-content: center;
justify-content: center;
flex-wrap:wrap;
height: 100px;
width: 100px;
background-color: blue;
color: white;
font-size:1.2rem;
}
const container = document.getElementById("container")
const wordList = ["here", "is", "a", "list", "of", "words"]
function mapFunction (item) {
const div = document.createElement("div")
div.classList.add("div-style")
div.innerHTML = item
container.appendChild(div)
}
wordList.map(mapFunction)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.