如何使经分页处理的JavaScript数组对象以行式布局展示？

我创建了一个对象数组：

let myArray = [
    {myObject: "This is object number 1"},
    {myObject: "This is object number 2"},
    {myObject: "This is object number 3"},
    {myObject: "This is object number 4"},
    {myObject: "This is object number 5"},
];

接着编写了数组分页函数：

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

随后写了用于渲染HTML的箭头函数：

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

之后调用分页函数结合渲染函数完成页面渲染：

productContainer.innerHTML = paginator(products, currentPage, perPage)
      .data.map(item => formatItem(item)).join("");

对象已在页面正确显示，但尝试将布局从列式改为行式时，使用CSS的display: grid和display: flex都没生效。我写的Grid布局CSS如下：

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

请问怎么让这些对象以行式布局展示？

1. 匹配容器选择器 #

确认productContainer对应的DOM元素ID确实是products，如果实际容器用的是类名，CSS里要改成.products，选择器不匹配会导致布局规则完全失效。

2. 修复渲染函数的HTML结构 #

你的formatItem生成的HTML有两处问题：

• ${item.category}没有合法属性名，应该写成data-category="${item.category}"这类标准属性；
• <div class="image-container">未闭合，会导致DOM结构错乱，浏览器自动补全标签后会破坏布局上下文。

修正后的渲染函数示例：

const formatItem = item => `<div class="card" data-category="${item.category}">
  <div class="image-container"><img src="${item.image}" /></div>
  <!-- 其他内容 -->
</div>`;

3. 确保布局作用于正确层级 #

如果#products是卡片的直接父容器，给卡片添加基础样式避免干扰布局：

.card {
  box-sizing: border-box;
  width: 100%;
}

这能保证卡片在Grid/Flex布局中正确适配容器宽度。

4. 排查CSS优先级冲突 #

通过浏览器开发者工具查看#products元素的样式面板，确认display: grid是否被其他高优先级规则（比如带!important的声明、更具体的选择器）覆盖，若有则调整选择器权重或修改冲突规则。

内容的提问来源于stack exchange，提问作者user20880571