商品展示页面布局的css代码

商品展示页面的布局可以采用网格布局或瀑布流布局等方式，下面分别介绍一下它们的 CSS 实现方式。

1. 网格布局：

网格布局是一种常用的商品展示页面布局方式，可以采用 CSS Grid 实现。下面是一个简单的例子：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

.grid-item {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

上面的代码中，`.grid-container` 设置了 `display: grid;` 表示采用网格布局，`grid-template-columns` 设置了每一列的宽度为最小 250px，最大为 1fr，采用 `auto-fit` 可以根据容器大小自动调整列数，`grid-gap` 设置了每个网格之间的间距为 20px。

`.grid-item` 表示每个网格的样式，可以根据实际需求进行调整。

2. 瀑布流布局：

瀑布流布局是一种比较流行的商品展示页面布局方式，可以采用 CSS Flexbox 实现。下面是一个简单的例子：

.waterfall-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.waterfall-item {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
}

.waterfall-item img {
  width: 100%;
  display: block;
}

上面的代码中，`.waterfall-container` 设置了 `display: flex;` 表示采用 Flexbox 布局， `flex-wrap: wrap;` 表示换行，`justify-content: space-between;` 表示在每一行内部元素之间均匀分布。

`.waterfall-item` 表示每个网格的样式，通过 `width: calc(33.33% - 10px);` 设置每个元素的宽度为 33.33%，减去 10px 的 margin，从而实现 3 列布局。`.waterfall-item img` 表示每个元素中的图片，可以根据实际需求进行调整。

以上代码只是示例，实际应用中还需要根据实际需求进行调整和优化。