实现自适应CSS Grid：元素居中且保持宽高比、自动伸缩

需求：

• 纯CSS实现
• Grid保持"自动"模式（不使用模板）
• 布局随浏览器窗口伸缩，元素始终居中
• 元素保留1:1宽高比
• 视觉效果：
  • 大屏时：2x2网格整体水平居中，左右留空
  • 窄屏时：2x2网格整体垂直居中，上下留空
• 无需指定固定网格或元素尺寸，元素自动扩展至最大适配尺寸

解决方案 #

修改后的CSS代码：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免不必要的滚动条 */
}

.grid {
  height: 100%;
  display: grid;
  place-content: center; /* 让网格内容在容器中同时水平、垂直居中 */
}

.item {
  aspect-ratio: 1; /* 强制保持1:1宽高比 */
  max-width: 50vw; /* 大屏时单个元素最大宽度为视口宽度的一半 */
  max-height: 50vh; /* 窄屏时单个元素最大高度为视口高度的一半 */
  width: 100%; /* 元素填满所在网格单元格 */
  height: 100%;
}

.item1 {
  grid-row: 1;
  grid-column: 1;
  background-color: LightSalmon;
}
.item2 {
  grid-row: 1;
  grid-column: 2;
  background-color: SlateBlue;
}
.item3 {
  grid-row: 2;
  grid-column: 1;
  background-color: LightSeaGreen;
}
.item4 {
  grid-row: 2;
  grid-column: 2;
  background-color: Plum;
}

HTML代码保持不变：

<div class="grid">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
</div>

关键实现说明 #

• place-content: center：直接实现网格内容在容器内的双向居中，无需额外定位属性。
• max-width: 50vw + max-height: 50vh：限制元素最大尺寸，让元素在不同屏幕比例下自动适配——大屏时横向优先扩展，窄屏时纵向优先扩展。
• aspect-ratio: 1：确保元素始终为正方形，尺寸变化时比例保持不变。
• width: 100% + height: 100%：让元素完全填充网格单元格，避免出现间隙。

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