介绍
首先让我们谈谈什么是砌体布局。砖石井的意思是“用砖，石材或类似材料建造结构的工艺” - 根据Google定义。
好吧，如果您问我，我会说在HTML中创建具有不同尺寸元素的响应式和美丽的布局。
在本文中，我们将使用砌体布局创建一个图像库网站，这将是漂亮和响应的。
让我们开始吧！
在学习创建砌体布局之前，让我们学习如何仅使用CSS响应图像。
使图像响应
假设我们在网站上有图像，
<img
class="image"
src="https://images.unsplash.com/photo-1693761935441-ad0ffad6905b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDF8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
/>
现在，要使此图像响应迅速，我们只需使用两行CS。
img {
max-width: 100%;
height: auto;
}
仅通过使用这两条CSS线，我们就可以在响应中制作每个图像。无论设备宽度将宽度将始终保持100%，我们添加了height: auto，因此当宽度随着设备宽度而变化时，它也会自行更新高度。
让我们创建砌体布局
是时候我们创建砌体布局了。首先，让我们在我们的html中添加一些图像
<div class="image-gallery">
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1693761935441-ad0ffad6905b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDF8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="ShowCaseGallery"
/>
</div>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1694009606218-eb46476e6300?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDR8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="ShowCaseGallery"
/>
</div>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1693165074962-ae564d6b16ee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDJ8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="ShowCaseGallery"
/>
</div>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1693754079764-d90b63861dd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="ShowCaseGallery"
/>
</div>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1693057205752-f7cabeaff629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDl8NnNNVmpUTFNrZVF8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="ShowCaseGallery"
/>
</div>
<div class="image-card">
<img
src="https://images.unsplash.com/photo-1693928626612-629e0b697ce1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEyfDZzTVZqVExTa2VRfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
alt="ShowCaseGallery"
/>
</div>
</div>
在这里，我添加了来自Unsplash的一堆图像，所有图像都有不同的高度和宽度。
当前图像在直线上看起来像这样，
现在，我们希望图像串行，也希望它们随着设备宽度的变化而更新。
我们希望布局看起来像这样，
因此，我们将定义要在页面中显示的列数，让我们编写一些CSS以使事物看起来很漂亮。
/* Parent container of .image-card */
.image-gallery {
columns: 3;
column-gap: 16px;
margin: 1rem;
}
因此，我们在页面上定义了3 columns，也给了column-gap: 16px，使其看起来更干净，每个.image-card周围都有一些空间，我们还添加了margin: 1rem，因此在整个容器周围添加一些间距。
让我们以CSS和次要CSS为目标。
.image-card {
positive: relative;
margin-bottom: 16px;
}
我们的砌体布局已经准备好：D是时候让一些@media queries响应this post，以了解有关@media queries的更多信息。8
@media screen and (max-width: 1200px) {
.image-gallery {
columns: 3;
}
}
@media screen and (max-width: 900px) {
.image-gallery {
columns: 2;
}
}
@media screen and (max-width: 500px) {
.image-gallery {
columns: 1;
}
}
我们完成了！
包起来
仅使用CSS创建砌体布局是非常基本的，您仍然可以通过实现JavaScript和更多功能来为其调味。