CSS是一種用于網頁樣式設計的語言，它可以用來美化頁面效果，其中圖片的布局也是CSS設計的重點之一。一種常見的布局方式是將圖片豎兩排顯示，下面我們來看看如何使用CSS實現這種布局。

//HTML代碼
<div class="img-container">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
<img src="image6.jpg" alt="image6">
</div>
//CSS代碼
.img-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.img-container img {
max-width: 48%;
margin-bottom: 20px;
}

首先，在HTML代碼中我們將所有的圖片都放到一個div容器中，方便進行整體布局的操作。接下來在CSS代碼中，我們用flex布局來進行圖片的豎向排列，通過設置容器的flex-wrap屬性為wrap，讓圖片自動換行顯示。同時，我們使用了justify-content屬性來實現圖片的左右之間的間隔。接著，對每個圖片設置了一個最大寬度，讓每張圖片的寬度在一定程度上適應不同設備和屏幕大小。最后，通過設置每個圖片的外邊距為20px，使得圖片在豎向排列時之間有一定的間隔。

上面這段CSS代碼的核心就是使用了flex布局，而flex布局是CSS3中用來替代傳統布局方式的強大工具，可以將元素的排列方式完全按照設計者的意愿進行分配和控制。

當然，以上代碼只是一種實現豎排圖片布局的方式，實際上還有很多其他方式可以實現相同的效果。最終的布局效果也會受到不同瀏覽器、不同設備和不同屏幕大小的影響，因此，我們需要在設計時兼顧不同情況下的效果，以最優的方式達到最佳的布局效果。