如何用HTML/CSS实现可自定义的居中正方形盒子网格（无需JS）

当前网站布局如下：

希望实现：

• 盒子设置为固定正方形尺寸
• 整体始终保持水平和垂直居中
• 布局支持两种形式：

  [] [] [] []
  

  或

  [] []
  [] []
  

但目前盒子出现倾斜偏移问题：

请问能否不使用JavaScript实现该效果？

当前HTML代码 #

<div class="grid-item">
    <a href="https://download.tails.net/tails/stable/tails-amd64-6.0/tails-amd64-6.0.img">
        <img class="app-image" src="assets/tails.png" height="100px">
        <div class="app-title">Tails 6</div>
        <div class="app-description">Amnesic live system.</div>
    </a>
</div>

当前CSS代码 #

html {
  height: 100%;
  background-color: #0f0f0f;
  margin: 0;
}

.body-default {
  color: #fff;
  display: flex;
  height: 100%;
  justify-content: center ;
  align-items: center;
  margin: 0;
  font-family: sans-serif;
}

.grid-container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.grid-item {
  border: 2px solid #4e4e4e;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 12.5px;
  background-color: #242424;
  transition: transform 0.2s cubic-bezier(0,.75,.25,1);
  transform-origin: center;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
}

.app-title {
  font-weight: bold;
  font-size:15px;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-description {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #808080;
}

.app-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100px;
  margin: auto;
  padding: 10px;
}

.grid-item:hover {
  transform: scale(1.05);
}

.centered-box {
  text-align: center;
  margin: 0 auto;
  width: 50%;
  padding: 20px;
}

完全可以通过纯CSS实现需求，主要调整Grid布局和盒子尺寸设置，同时修正偏移问题：

1. 调整Grid容器实现响应式列数 #

修改grid-container的列布局规则，实现自动适配的4列/2列效果，同时限制容器宽度避免拉伸：

.grid-container {
  margin: 0 auto;
  display: grid;
  /* 自动适配列数，每列最小200px，宽屏时最多4列，窄屏自动收缩为2列或更少 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 让行高等于列宽，确保盒子为正方形 */
  grid-auto-rows: 1fr;
  grid-gap: 20px;
  /* 限制容器最大宽度，避免盒子过宽 */
  max-width: 900px;
  width: 90%;
  /* 移除多余对齐属性，父元素flex已实现整体居中 */
}

2. 强制Grid Item为正方形 #

通过伪元素确保盒子始终保持正方形，不受内部内容高度影响：

.grid-item::before {
  content: '';
  padding-top: 100%;
  display: block;
  order: -1; /* 伪元素放到最前面，不干扰内容布局 */
}

.grid-item {
  border: 2px solid #4e4e4e;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 12.5px;
  background-color: #242424;
  transition: transform 0.2s cubic-bezier(0,.75,.25,1);
  transform-origin: center;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
  overflow: hidden; /* 防止内容超出正方形 */
}

3. 修正偏移问题 #

偏移源于容器宽度和对齐规则冲突，调整后：

• 父元素.body-default已通过display: flex实现整体垂直水平居中，无需给grid-container额外加对齐属性
• 用width: 90%+max-width替代width: 100%，避免容器过宽导致盒子拉伸偏移

4. 优化内部内容布局 #

调整图片和文字的尺寸，确保在正方形内合理排列：

.app-image {
  max-width: 80%;
  max-height: 40%;
  width: auto;
  height: auto;
  margin: 10px 0;
}

最终效果 #

• 盒子始终为正方形，不会随内容或窗口大小变形
• 整体在页面中水平垂直居中
• 宽屏显示4列，窄屏自动切换为2列（或更少）
• 鼠标悬停缩放效果正常，无偏移

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