CSS 的圖片排列方式是非常靈活的，可以通過不同的布局屬性和樣式來實現不同的效果。下面我們來看一些常用的排列方式。

/* 將圖片垂直排列 */
img {
display: block;
margin-bottom: 10px;
}
/* 將圖片水平排列 */
.container {
display: flex;
}
.container img {
margin-right: 10px;
}
/* 將圖片網格狀排列 */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid img {
width: 100%;
}

以上是三種常用的排列方式。第一種是將圖片垂直排列，這里使用display: block;屬性將圖片轉換成塊級元素，然后通過margin-bottom屬性來控制圖片之間的間距。

第二種是將圖片水平排列，這里使用了 Flex 布局。容器使用display: flex;屬性，然后通過margin-right屬性來控制圖片之間的間距。

第三種是將圖片網格狀排列，這里使用了 Grid 布局。容器使用display: grid;屬性，并設置了grid-template-columns屬性來控制列數和列寬，還設置了grid-gap屬性來控制圖片之間的間距，最后為圖片設置了width: 100%;屬性來確保圖片鋪滿格子。