CSS Grid 边框优化：响应式九宫格布局的桌面与移动端统一方案-html教程-PHP中文网

CSS Grid 边框优化：响应式九宫格布局的桌面与移动端统一方案

本文详解如何用 CSS Grid 实现无间隙、等宽边框的九宫格布局，并在桌面端保持精细控制、移动端避免边框过厚问题，通过 border-collapse 思路替代重复声明，结合媒体查询与语义化类名实现高效响应式边框管理。

本文详解如何用 css grid 实现无间隙、等宽边框的九宫格布局，并在桌面端保持精细控制、移动端避免边框过厚问题，通过 `border-collapse` 思路替代重复声明，结合媒体查询与语义化类名实现高效响应式边框管理。

在构建响应式网格布局时，为每个单元格单独设置上下左右边框（如原代码中 .div1 到 .div9 分别声明 border-top/border-left 等）不仅冗余难维护，更会在移动端因多方向边框叠加导致视觉“加粗”——例如相邻 div 的 border-right 与 border-left 在小屏下紧贴显示，实际呈现为 4px 宽度，违背设计预期。

核心优化思路：模拟表格的 border-collapse: collapse 行为
不依赖 gap（因其会破坏边框连续性），而是通过统一控制边框方向 + 逻辑分组实现“无缝拼接”效果：

✅ 桌面端（≥651px）：采用三行三列 Grid，仅对每行首列添加 border-left，末列添加 border-right；每列首行添加 border-top，末行添加 border-bottom；中间单元格仅保留 border-bottom 和 border-right（或使用 .middle-div 类集中控制）；
✅ 移动端（≤650px）：切换为单列流式布局，取消所有侧边框，仅保留 border-bottom（除最后一项），避免叠加过厚——这是原问题中“2px 显得太厚”的根本解法。

以下是优化后的关键 CSS 片段（已精简冗余样式，增强可维护性）：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  width: 90vw;
  max-width: 800px;
  margin: 30px auto;
  border-radius: 10px;
  background: #148aff;
}

/* 统一边框策略：仅需声明必要边框 */
.div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}

/* 第一列：统一左边界 */
.div1, .div4, .div7 {
  border-left: 2px solid black;
}
/* 第三列：统一右边界 */
.div3, .div6, .div9 {
  border-right: 2px solid black;
}
/* 第一行：统一上边界 */
.div1, .div2, .div3 {
  border-top: 2px solid black;
}
/* 第三行：统一下边界 */
.div7, .div8, .div9 {
  border-bottom: 2px solid black;
}
/* 中间区域共享边框（避免重复） */
.div2, .div4, .div6, .div8 {
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}

/* 移动端：转为单列，仅底部边框（最后一项除外） */
@media (max-width: 650px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, minmax(120px, auto));
    gap: 0;
  }

  .div {
    border: none;
    border-bottom: 2px solid black;
  }

  /* 移除最后一个元素的底部边框 */
  .div9 {
    border-bottom: none;
  }
}

HTML 结构保持语义清晰，无需为每个 div 单独命名：

<div class="container">
  <div class="div div1"><p>div1</p></div>
  <div class="div div2"><p>div2</p></div>
  <div class="div div3"><p>div3</p></div>
  <div class="div div4"><p>div4</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div></div>
  <div class="div div5"><p>div5</p></div>
  <div class="div div6"><p>div6</p></div>
  <div class="div div7"><p>div7</p></div>
  <div class="div div8"><p>div8</p></div>
  <div class="div div9"><p>div9</p></div>
</div>

关键注意事项：