在响应式页面开发中，Div边框的适配一直是常见需求，固定像素的边框和间距在大屏小屏切换时容易出现比例失调的问题。结合CSS Grid的布局能力和百分比Margin的相对尺寸特性，可以轻松实现跟随视口自动调整的边框效果。
核心原理说明
CSS Grid可以将容器划分为多个网格轨道，每个网格的尺寸可以用百分比、fr等单位定义，天然适配不同屏幕宽度。而百分比Margin是相对于父容器宽度计算的，当父容器随视口变化时，Margin值也会同步调整，以此控制Div与周围元素的间距，间接实现边框相关的视觉隔离效果。
基础实现步骤
1. 定义Grid容器
首先给父容器设置display: grid，并定义网格的列规则，这里用百分比分配列宽，保证网格随容器宽度变化。
/* 父容器基础样式 */
.grid-container {
display: grid;
/* 定义3列，每列占父容器宽度的30%，列之间间距2% */
grid-template-columns: 30% 30% 30%;
gap: 2%;
padding: 2%;
background-color: #f5f5f5;
box-sizing: border-box;
}2. 给子Div设置百分比Margin与边框
子Div的Margin使用百分比值，边框样式可以根据需求设置，Margin会随父容器宽度自动调整，保证不同屏幕下的间距一致性。
/* 子Div样式 */
.grid-item {
/* 水平方向Margin为2%，相对于父容器宽度计算 */
margin: 0 2%;
padding: 15px;
border: 2px solid #4a90e2;
border-radius: 4px;
background-color: #ffffff;
box-sizing: border-box;
text-align: center;
}3. 响应式适配调整
通过媒体查询在小屏幕下调整Grid列数，配合百分比Margin保持边框周围的间距合理。
/* 屏幕宽度小于768px时的适配规则 */
@media screen and (max-width: 768px) {
.grid-container {
/* 小屏幕下改为2列布局 */
grid-template-columns: 48% 48%;
gap: 4%;
}
.grid-item {
/* 调整小屏幕下的Margin比例 */
margin: 0 1%;
}
}
@media screen and (max-width: 480px) {
.grid-container {
/* 超小屏幕下改为单列布局 */
grid-template-columns: 96%;
gap: 0;
}
.grid-item {
margin: 2% 0;
}
}完整示例代码
以下是可直接运行的完整HTML示例，包含结构和样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid百分比Margin响应式边框示例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 30% 30% 30%;
gap: 2%;
padding: 2%;
background-color: #f5f5f5;
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto;
}
.grid-item {
margin: 0 2%;
padding: 20px;
border: 2px solid #4a90e2;
border-radius: 4px;
background-color: #ffffff;
box-sizing: border-box;
text-align: center;
font-size: 16px;
color: #333;
}
@media screen and (max-width: 768px) {
.grid-container {
grid-template-columns: 48% 48%;
gap: 4%;
}
.grid-item {
margin: 0 1%;
}
}
@media screen and (max-width: 480px) {
.grid-container {
grid-template-columns: 96%;
gap: 0;
}
.grid-item {
margin: 2% 0;
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">第一个Div边框</div>
<div class="grid-item">第二个Div边框</div>
<div class="grid-item">第三个Div边框</div>
<div class="grid-item">第四个Div边框</div>
<div class="grid-item">第五个Div边框</div>
<div class="grid-item">第六个Div边框</div>
</div>
</body>
</html>注意事项
- 设置
box-sizing: border-box可以避免边框和内边距撑大元素宽度，保证百分比计算准确。 - 百分比Margin是相对于父容器宽度计算的，即使设置垂直方向Margin，也是参考父容器宽度，使用时需要注意。
- Grid的gap属性和Margin可以配合使用，gap控制网格之间的间距，Margin控制子元素与网格边界的间距，两者结合可以灵活调整边框周围的留白。