將砌體風格的圖像添加到網站的部分

Question

我一直在嘗試將圖像的砌體部分添加到我的網站。但它沒有正確對齊。它只是將圖片堆疊在一起。我怎麼能用css/html創建砌體部分？或者，也許創建一個表格可以提供磚石效果？

我的HTML：

<div class="masonry"> 
    <div class="item">IMAGE GOES HERE</div> 
    <div class="item">SECOND IMAGE </div> 
    THIRD IMAGE 
    <div class="item">FOURTH IMAGE</div> 
</div> 

我的CSS：

.masonry { /* Masonry container */ 
    column-count: 4; 
    column-gap: 1em; 
} 

.item { /* Masonry bricks or child elements */ 
    background-color: #eee; 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 100%; 
} 

下面的圖片是什麼，我想實現：

Answer 1

在這裏你去：

#container { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#left > img:nth-of-type(1) { 
 
    height: 25vh; 
 
    width: 35vw; 
 
} 
 
#left > img:nth-of-type(2) { 
 
    height: 60vh; 
 
    width: 35vw; 
 
} 
 
#left, #right { 
 
    display: inline-block; 
 
} 
 
#top-right, #bottom-right { 
 
    display: block; 
 
} 
 
#top-right > img:nth-of-type(1) { 
 
    width: 25vw; 
 
    height: 60vh; 
 
} 
 
#top-right > img:nth-of-type(2) { 
 
    width: 35vw; 
 
    height: 60vh; 
 
} 
 
#bottom-right > img:nth-of-type(1) { 
 
    width: 40vw; 
 
    height: 25vh; 
 
} 
 
#bottom-right > img:nth-of-type(2) { 
 
    width: 20vw; 
 
    height: 25vh; 
 
}

<div id="container"> 
 
    <div id="left"> 
 
    <img src="Image 1"> 
 
    <br> 
 
    <img src="Image 2"> 
 
    </div> 
 
    <div id="right"> 
 
    <div id="top-right"> 
 
     <img src="Image 3"> 
 
     <img src="Image 4"> 
 
    </div> 
 
    <div id="bottom-right"> 
 
     <img src="Image 5"> 
 
     <img src="Image 6"> 
 
    </div> 
 
    </div> 
 
</div>