How could I add a grid layout to HTML using JavaScript
I have this code:
const formatItem = item => `<div class="card" ${item.category}">
<div class="image-container"><img src="${item.image}" />
<div class="container">
<h5 class="product-name">${item.productName.toUpperCase()}</h5>
<h6>£${item.price}</h6>
</div>
</div>`;
productContainer.innerHTML = paginator(products, currentPage, perPage)
.data.map(item => formatItem(item)).join("");
`
I have then appended this code to the HTML document. Although the div class displays correctly, the div id does not display in a grid layout. Why is this and how could I fix it?
CSS code:
#products {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
column-gap: 1.5em;
padding: 2em 50px;
}