如何创建带全屏单元格边框的2*2 Grid布局（非硬编码边框尺寸）

要实现每个单元格边框占满最大尺寸且无需硬编码边框尺寸的2x2 Grid布局，可以通过Grid布局结合边框选择器来实现，既避免边框重叠，又保证边框贴合单元格边缘：

HTML结构 #

<div class="grid-container">
  <div class="grid-item">单元格1</div>
  <div class="grid-item">单元格2</div>
  <div class="grid-item">单元格3</div>
  <div class="grid-item">单元格4</div>
</div>

CSS实现 #

/* 全局盒模型重置，确保边框纳入元素尺寸计算 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  /* 2列等分可用空间 */
  grid-template-columns: repeat(2, 1fr);
  /* 2行等分可用空间 */
  grid-template-rows: repeat(2, 1fr);
  /* 消除单元格间距，避免边框出现间隙 */
  gap: 0;
  /* 容器外层边框，补全网格的左上边缘 */
  border: 1px solid #000;
  /* 容器尺寸可按需调整，示例为占满宽度+固定高度 */
  width: 100%;
  height: 400px;
}

.grid-item {
  /* 单元格添加右侧和下侧边框，作为内部分隔线 */
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  /* 可选：添加内边距避免内容贴边框 */
  padding: 1rem;
  /* 可选：让单元格内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 移除最后一列单元格的右侧边框，避免与容器右侧边框重复 */
.grid-item:nth-child(2n) {
  border-right: none;
}

/* 移除最后一行单元格的下侧边框，避免与容器底部边框重复 */
.grid-item:nth-last-child(-n+2) {
  border-bottom: none;
}

关键说明 #

• box-sizing: border-box确保边框被包含在单元格的1fr尺寸内，不会撑开布局，保证边框占满单元格边缘。
• 通过容器边框+单元格局部边框的组合，避免相邻单元格边框重叠变粗的问题。
• 边框尺寸仅需在border属性中统一设置，无需硬编码每个单元格的尺寸，修改时只需调整一处即可。

内容的提问来源于stack exchange，提问作者Yanshof