如何用单个遍历标签实现数据库图书数据的HTML网格布局？

你当前的核心问题是把grid-container放在了<c:forEach>循环内部，导致每遍历一本图书就生成一个独立的网格容器，根本无法形成统一的网格布局。只需要调整结构，让所有图书项都处于同一个网格容器内即可，具体方案如下：

修改后的JSP代码 #

<body>
  <!-- 将网格容器放在循环外部，作为所有图书项的统一容器 -->
  <div class="grid-container">
    <c:forEach var="book" items="${book_list}">
      <!-- 每本图书的所有内容（标题、价格、按钮）包裹在一个grid-item中，作为网格的一个独立项 -->
      <div class="grid-item">
        <div class="book-title">${book.title}</div>
        <div class="book-price">${book.price}$</div>
        <form action="addToCart" method="GET">
          <!-- 重要：添加隐藏字段传递图书ID，否则后端无法识别要加入购物车的具体图书 -->
          <input type="hidden" name="bookId" value="${book.id}">
          <button type="submit">Add to cart</button>
        </form>
      </div>
    </c:forEach>
  </div>
</body>

配套CSS样式 #

.grid-container {
  display: grid;
  /* 自适应列数：最小宽度250px，自动填充剩余空间，实现响应式布局 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px; /* 网格项之间的间距，提升视觉效果 */
  padding: 20px;
}

.grid-item {
  border: 1px solid #e0e0e0;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}

.book-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.book-price {
  color: #2ecc71;
  margin-bottom: 1rem;
}

说明 #

1. 结构调整：把grid-container移到<c:forEach>外面，确保所有图书项都属于同一个网格容器，这样CSS的网格布局才能生效。
2. 图书项封装：每本图书的标题、价格和按钮都放在一个grid-item里，让每本图书成为网格中的一个独立卡片，符合常规的商品展示逻辑。
3. 响应式优化：repeat(auto-fill, minmax(250px, 1fr))的设置会让网格根据屏幕宽度自动调整列数，在手机、平板、桌面端都有良好的显示效果。
4. 功能补全：原表单缺少图书标识，添加隐藏字段bookId后，后端就能准确知道要将哪本图书加入购物车，避免功能失效。

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