将砌体风格的图像添加到网站的部分

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>