如何用HTML/CSS实现含特殊尺寸盒子的响应式网格布局？

用CSS Grid完全可以实现这个需求，不用Flex。以下是具体代码：

HTML结构 #

<div class="grid-container">
  <div class="box small"></div>
  <div class="box small"></div>
  <div class="box small"></div>
  <div class="box small"></div>
  <div class="box large"></div>
</div>

CSS样式 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列等宽布局 */
  gap: 10px; /* 网格间距，可自行调整 */
  padding: 10px; /* 可选，给容器加内边距 */
  max-width: 600px; /* 可选，限制容器最大宽度，避免过大 */
  margin: 0 auto; /* 可选，让容器居中 */
}

.box {
  border-radius: 4px; /* 可选，加圆角美化 */
}

.box.small {
  aspect-ratio: 1; /* 强制小盒子为正方形 */
  background-color: #e0e0e0;
}

.box.large {
  grid-column: 1 / -1; /* 让大盒子占满整行（2列宽度） */
  aspect-ratio: 1; /* 强制大盒子为正方形，此时宽度=2个小盒子宽度+网格间距，高度与宽度相等 */
  background-color: #bdbdbd;
}

关键逻辑说明 #

• grid-template-columns: repeat(2, 1fr) 创建2列等宽的网格，4个小盒子会自动填充成2×2的布局，尺寸完全均等。
• aspect-ratio: 1 是核心：它强制盒子保持宽高1:1的比例。小盒子的宽高自然相等；大盒子占满2列宽度，这个宽度刚好等于2个小盒子的宽度 + 网格间距，再通过aspect-ratio:1让高度等于这个宽度，完美符合你要的正方形大盒子。
• 调整gap的值可以改变网格间距，不会破坏整体比例。

如果想要其他排列方式（比如大盒子在左侧，4个小盒子在右侧排成2×2），可以用下面的代码：

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* 第一列宽度是后两列的2倍 */
  grid-template-rows: repeat(2, 1fr); /* 2行等宽 */
  gap: 10px;
  padding: 10px;
  max-width: 600px;
  margin: 0 auto;
}

.box.large {
  grid-row: 1 / 3; /* 让大盒子占满2行高度 */
  aspect-ratio: 1; /* 保持正方形 */
}

.box.small {
  aspect-ratio: 1;
}

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