你是否曾想过为什么有些网站看起来如此时尚整洁？
秘密通常在于砌体布局。这种布局不仅仅是为了美观；它可以提升用户参与度，让你的内容更加出色。
你知道吗？拥有视觉吸引力设计的网站可以让用户停留在页面上的时间增加 50%。
这就是砌体布局的作用。它帮助你创建一个动态、吸引人的设计，让你的访客着迷。
砌体布局是一种基于网格的设计，其中的项目被排列以最小化它们之间的垂直间隙。
与传统的固定行高网格不同，砌体布局根据内容高度动态调整项目的位置。
这创造了一种视觉上吸引人且空间利用高效的布局，非常适合展示诸如图片、博客文章和不同尺寸产品等内容。
简单来说，把砌体布局想象成一个拼图，每个块都完美地契合，无论其形状或大小如何。
无论你是展示照片库还是组织博客文章，砌体布局都能让你的网站看起来更具动态性和吸引力。
与标准网格相比，砌体布局创造了一个更有机、不那么统一的外观。
传统的网格布局通常显得僵硬和可预测，每个项目都遵循相同的高度和宽度。
相反，砌体布局允许更流畅和动态的排列，不同高度和宽度的项目可以和谐共存。
这为用户创造了视觉上引人入胜的体验，使你的网站以其独特和现代的设计脱颖而出。
不规则的排列也可以吸引注意力到单个内容上，使其更加难忘。
砌体布局的关键优势之一是最小化项目之间的垂直间隙，更好地利用可用空间。
在传统网格中，项目通常被强制放入统一高度，如果内容不完全符合网格尺寸，可能会导致空间浪费。
然而，砌体布局根据项目高度动态调整位置，确保充分利用每一点空间。
这使得你的布局看起来更清洁、有序，并允许你在相同区域内展示更多内容，增强整体用户体验。
砌体布局提供了令人难以置信的灵活性，允许你展示不同高度的项目而无需裁剪或调整大小。
这对于像图片、博客文章和产品这样尺寸可能差异巨大的内容特别有用。
例如，在图片库中，你可能有不同方向和大小的照片。
砌体布局可以轻松处理所有这些差异，展示每张图片而不影响整体设计。
同样，在博客文章或产品列表中，你可以呈现各种长度和大小的内容，而无需保持一致的外观。
-
图片库：展示不同尺寸的图片而无需裁剪。
-
博客布局：排列不同长度的文章。
-
电子商务网站：展示具有不同尺寸的产品。
-
创建项目文件夹：在一个专用文件夹中组织你的文件。
-
创建 HTML 和 CSS 文件：在项目文件夹中创建
index.html和styles.css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 砌体布局</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="masonry">
<div class="item item1">项目 1</div>
<div class="item item2">项目 2</div>
<div class="item item3">项目 3</div>
<div class="item item4">项目 4</div>
<div class="item item5">项目 5</div>
<div class="item item6">项目 6</div>
<div class="item item7">项目 7</div>
<div class="item item8">项目 8</div>
<div class="item item9">项目 9</div>
<div class="item item10">项目 10</div>
</div>
</body>
</html>
<div class="masonry"> 作为我们砌体布局的主要容器。
我们将应用 CSS Grid 来实现这个容器内的砌体效果。
从 <div class="item item1">项目 1</div> 到 <div class="item item10">项目 10</div>，每个项目都是布局的组成部分。
每个项目都有一个 item 类用于一致的样式，以及一个特定的类（如 item1、item2 等）来赋予每个项目独特的样式，如不同的高度和颜色。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
margin: 0;
}
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-auto-rows: 10px;
gap: 20px;
}
.item {
padding: 20px;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
transition: transform 0.3s;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
color: #fff;
}
.item:hover {
transform: translateY(-5px);
}
.item1 {
grid-row: span 15;
background-color: #ff6f61;
}
.item2 {
grid-row: span 8;
background-color: #6b5b95;
}
item3 {
grid-row: span 10;
background-color: #88b04b;
}
.item4 {
grid-row: span 8;
background-color: #d65076;
}
.item5 {
grid-row: span 15;
background-color: #ffb347;
}
.item6 {
grid-row: span 15;
background-color: #45b8ac;
}
.item7 {
grid-row: span 15;
background-color: #e94b3c;
}
.item8 {
grid-row: span 10;
background-color: #6c5b7b;
}
.item9 {
grid-row: span 15;
background-color: #00a86b;
}
.item10 {
grid-row: span 10;
background-color: #b565a7;
}
这意味着：
-
body设置了字体系列、背景颜色、填充，并移除了默认边距。 -
这段 CSS 代码定义了一个带有
.masonry类的容器的样式。 -
display: grid;：这将容器设置为使用 CSS Grid 布局，允许灵活和响应式的网格系统。 -
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));：这定义了网格的列。repeat(auto-fill, minmax(220px, 1fr))部分的含义是： -
auto-fill：自动填充行，以适应尽可能多的列。 -
minmax(220px, 1fr)：每列应至少为 220px 宽，但可以扩展以占据剩余空间（1fr代表可用空间的一个分数）。 -
grid-auto-rows: 10px;：这将行的高度设置为 10px。这可能看起来很小，但通常与其他技术（如设置单个项目的高度）结合使用，以创建灵活的布局。 -
gap: 20px;：这将设置网格项之间的间距为 20px，为行和列中的项目提供间距。
通过创建特定样式为每个项目定义不同的行高和颜色，允许不同高度和背景颜色的项目。
右键单击 index.html 文件，然后点击“使用 Live Server 打开”。你的砌体布局就在这里。
这个布局完全响应式，并适应不同的屏幕尺寸。
