Add grid layout to HTML element using JavaScript

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;
}