商品排列展示是電子商務網站非常重要的一部分，它直接影響著用戶的購物體驗和購買決策。因此，如何讓商品展示更加美觀、實用就顯得尤為重要。本文將從CSS樣式的角度，介紹幾種通用的商品排列展示方式。

/*1. 瀑布流布局*/
.item-container{
column-count: 3;
column-gap: 20px;
margin: 30px auto;
}
.item{
display: inline-block;
margin-bottom: 20px;
width: 100%;
}
.item img{
width: 100%;
height: auto;
}
.item span{
display: block;
text-align: center;
}
/*2. 網格布局*/
.item-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 30px auto;
}
.item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item img{
width: 100%;
height: auto;
}
.item span{
margin-top: 10px;
text-align: center;
}
/*3. 列表布局*/
.item-container{
margin: 30px auto;
}
.item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.item img{
width: 30%;
height: auto;
}
.item span{
display: block;
}
/*4. 卡片布局*/
.item-container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 30px auto;
}
.item{
width: 30%;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 1px 1px 2px #ccc;
}
.item img{
width: 100%;
height: auto;
}
.item span{
display: block;
}

以上代碼展示了四種常見的商品排列展示布局，它們分別是瀑布流布局、網格布局、列表布局和卡片布局。具體的樣式可以根據實際情況進行調整，或者加上一些動效，讓商品展示更加生動，吸引用戶的眼球。在實際開發中，還可以結合JS實現懶加載、無限滾動等功能，提升用戶的瀏覽體驗。