CSS Grid结合媒体查询实现三档响应式布局时移动端项目方块无法居中

算力阿峰

2026-11-11

CSS Grid小屏适配居中失效的修复

实际存在的三个问题

大括号匹配错位：当前的媒体查询代码里，.project-tile的样式块结束后多了一个独立的闭合大括号，浏览器解析时会直接让媒体查询块提前结束，部分小屏样式根本没进到生效范围内。
对齐属性用错了层级：很多开发者会把Grid的两组对齐逻辑搞混：
- justify-items/align-items管的是单个格子里的项目怎么在格子内部对齐
- justify-content/align-content管的是所有格子拼起来的整个网格块在父容器里怎么摆放
  你现在只设置了格子里的项目居中，但网格列被写死成200px宽，整个网格拼起来才200px，比容器窄很多的时候，默认是靠左边放的。哪怕每个项目在自己的200px格子里居中，整块内容还是偏左，看起来就像居中没生效。
重复写的对齐反而可能出问题：父容器已经设了全格子的项目对齐规则，子元素上单独写的justify-self/align-self是完全冗余的，搞不好还会被其他权重更高的旧样式覆盖，越写越乱。

修正后的可用代码

@media (max-width: 549px) {
  .projects-container {
    /* 新增的核心：把整个网格块在容器里居中 */
    justify-content: center;
    align-content: center;
    /* 保留你原来的项目在格子内居中的逻辑 */
    justify-items: center;
    align-items: center;
    /* 把死写的200px列宽优化下，避免超窄屏横向滚动 */
    grid-template-columns: minmax(200px, 80vw);
    /* 6行重复的200px可以用repeat简写，少写很多重复值 */
    grid-template-rows: repeat(6, 200px);
  }
  /* 原来写在.project-tile上的对齐声明可以全删掉，父容器的规则已经够了 */
}