当html中只有一个标记显示数据库中的数据时，如何创建网格布局？_Html_Css_Mysql_Jsp

当html中只有一个标记显示数据库中的数据时，如何创建网格布局？

html css mysql jsp

当html中只有一个标记显示数据库中的数据时，如何创建网格布局？,html,css,mysql,jsp,Html,Css,Mysql,Jsp,我不知道我的问题是否表达得很好，所以我将向您展示我的代码。这是我的jsp： <body> <c:forEach var="book" items="${book_list}"> <div class="grid-container"> <div class="grid-item">${book.ti

我不知道我的问题是否表达得很好，所以我将向您展示我的代码。这是我的jsp：

    <body>
    <c:forEach var="book" items="${book_list}">
            <div class="grid-container">
                <div class="grid-item">${book.title}</div>//Multiple different books are displayed here
                <div class="grid-item">${book.price}$</div>//Multiple different prices
            </div>
            <form action="addToCart" method="GET">
                <button type="submit">Add to cart</button>
            </form>                                                               
    </c:forEach>
</body>


${book.title}//此处显示多个不同的书籍
${book.price}$//多种不同的价格
添加到购物车

正如您所看到的，我遍历book_列表（从数据库）的每个标记都有一个标签，并在两个div标记中显示它们的标题和价格。我想做网格布局，把项目（书）放在网格里。所以我在谷歌上搜索如何做到这一点，每个例子都是这样的：

   <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  </div>


1.
2.
3.

这里每个项目都有一个div标签。当我有一个标签但有多个项目时，如何将我的书籍放入网格布局？

考虑使用CSS网格样式来显示每一列。在每列中显示多个项目将产生网格样式：

.grid容器{
显示：网格；
网格模板列：自动；
}


标题-1
1号提案
标题2
第二号提案
标题-3
3号提案

您可以在

中为name和price创建两个div，并分别进行设计。因此，您的jsp代码如下所示：

<div class="grid-container">
 <c:forEach var="book" items="${book_list}">
      <div class="grid-item">
         <div class="name">${book.title}</div>
         <div class="price">${book.price}$</div>
         <div class="cart">
         <form action="addToCart" method="GET">
         <button type="submit">Add to cart</button>
        </form></div>
    </div>
   </c:forEach>
</div>


项目名称
150 $
添加到购物车
项目名称
150 $
添加到购物车
项目名称
150 $
添加到购物车

谢谢，但这不是我想要的。我想在一个专栏中有标题1和下面的道具-1，然后下一个专栏标题2和下面的道具-2等。你知道可能怎么做吗？样式应该满足你的需要了。过来看。