C# 使用.InnerHtml从数据库显示错误的项目

我正在尝试按类别动态显示数据库中的教科书

当我使用卡片将教科书硬编码到html中时，卡片使用.gridcontainer横向堆叠，其中每4个条目将在一行中

现在，我动态地将卡片堆叠的项目显示在彼此的顶部，而不是侧边

我正在尝试创建一个电子商务图书网站，我正在做一个显示图书的探索页面

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: darkslategray;

  box-sizing: border-box;
  border: solid blue 10px;

}

数学

dynamic products=SR.getProductByCat（“数学”）；
字符串显示=”；
foreach（产品中的教科书p）
{
显示+=”；
显示+=“”+p.Book_Name+“”；
显示+=”；
显示+=“R”+p.Book\u Price.ToString（“#.###”）+“
”；
显示+=“添加到购物车”
”；
显示+=”；
}
mathematics.InnerHtml=显示；

---

我希望包含书籍信息的卡片可以显示为侧边，但它们堆叠在一起

您的href的结束标记中有一个小错误-可能会弄乱整个页面

<a/>

应该是

</a>

---

始终使用HTML验证程序来帮助发现像这样的小错误。

会让它更容易。。。仍然没有正确堆叠。。。我尝试了一种不同的方法，使用行和列类划分，并对问题进行了排序。。但是谢谢你的回答，这很奇怪，我看不出还有什么不对的地方——我不是css网格方面的专家。通常，我会将这样的代码生成的HTML与有效的代码（例如，从在线示例中）进行比较，然后一次更改一件事以找出差异。发布呈现的HTML。

<a/>

</a>