如何在HTML/Rails中按每3个产品自动生成行？

当然有啦！根据你使用的技术栈不同，有好几种简单靠谱的实现方式，我给你整理几个最常用的方案，你可以按需选择：

这是目前最简洁的实现方式，完全不需要JavaScript，浏览器兼容性也很好（支持现代浏览器及IE11+）。核心思路是用Grid布局指定每行3列，剩下的交给浏览器自动排列。

/* 产品列表容器 */
.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行固定3列，宽度自动均分 */
  gap: 1.5rem; /* 产品之间的间距，可根据需求调整 */
  padding: 1rem;
}

/* 单个产品项样式 */
.product-item {
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
}

HTML结构就这么简单，不管你有多少个产品，都会自动每行排3个：

<div class="product-list">
  <div class="product-item">产品1</div>
  <div class="product-item">产品2</div>
  <div class="product-item">产品3</div>
  <div class="product-item">产品4</div>
  <div class="product-item">产品5</div>
  <!-- 更多产品... -->
</div>

如果需要响应式适配不同屏幕，加个媒体查询就行：

/* 平板屏幕每行2个 */
@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 手机屏幕每行1个 */
@media (max-width: 480px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}

如果需要兼容更老的浏览器，或者习惯用Flex布局，这个方案也很实用。核心是让容器换行，然后给每个产品项设置固定宽度占比。

.product-list {
  display: flex;
  flex-wrap: wrap; /* 允许产品换行 */
  gap: 1.5rem;
  padding: 1rem;
}

.product-item {
  /* 宽度占1/3，减去gap的分摊值（3个项之间有2个gap，所以每个项要减 1.5rem * 2 / 3 = 1rem） */
  flex: 0 0 calc(33.333% - 1rem);
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
}

同样可以加媒体查询调整列数，和Grid方案的响应式逻辑一致。

如果你的需求不仅是排版，还需要给每行单独加容器、或者有其他业务逻辑要处理，那可以用JS先把产品数组拆分成每3个一组，再渲染到页面。

// 假设这是你的产品数据
const productData = [
  { name: "产品1", price: "¥99" },
  { name: "产品2", price: "¥199" },
  { name: "产品3", price: "¥299" },
  { name: "产品4", price: "¥399" },
  { name: "产品5", price: "¥499" }
];

const productsPerRow = 3;
const container = document.getElementById("product-container");

// 循环拆分数组，每3个产品生成一行
for (let i = 0; i < productData.length; i += productsPerRow) {
  // 创建行容器
  const row = document.createElement("div");
  row.classList.add("product-row");

  // 取出当前行的产品
  const currentRowProducts = productData.slice(i, i + productsPerRow);

  // 渲染每个产品项
  currentRowProducts.forEach(product => {
    const item = document.createElement("div");
    item.classList.add("product-item");
    item.innerHTML = `<h3>${product.name}</h3><p>${product.price}</p>`;
    row.appendChild(item);
  });

  container.appendChild(row);
}

对应的CSS可以给行容器加Flex布局：

.product-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.product-item {
  flex: 1; /* 每行内的产品宽度均分 */
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
}

总结：优先选CSS Grid方案，代码最简洁、性能最好；如果需要兼容极老浏览器，用Flexbox；只有当需要额外业务逻辑时，再考虑JS方案。

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