JavaScript Grid Layout

I have created a grid layout in CSS using the following code:

#products {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    column-gap: 1.5em;
    padding: 2em 50px;
}

I have then added code to this DIV ID using the following JavaScript

const formatItem = item => `<div class="card" ${item.category}">
<div class="image-container"><img src="${item.image}" />
</div>`;

const paginator = (items, page, per_page) => {
  let offset = (page - 1) * per_page;
  let paginatedItems = items.slice(offset).slice(0, per_page);
  let total_pages = Math.ceil(items.length / per_page);

  return {
    page: page,
    per_page: per_page,
    pre_page: page - 1 ? page - 1 : null,
    next_page: (total_pages > page) ? page + 1 : null,
    total: items.length,
    total_pages: total_pages,
    data: paginatedItems
  };
};
products.innerHTML = paginator(products, currentPage, perPage)

However, the cards are not displayed in a grid format. Why is this and how could I fix it?