如何实现网站CSS Grid响应式布局并自定义手机端元素排序

不用改动现有HTML结构，直接利用CSS Grid的区域命名能力，配合你已写在CSS底部的媒体查询规则，就能快速完成跨设备的响应式适配。

1. 给Grid子元素绑定可识别的命名区域 #

先给当前Grid布局下的每个内容块加对应类名，同时绑定Grid专属的grid-area标识符，后续不用再靠复杂选择器逐个定位：

• 标题元素：类名article-title，绑定grid-area: title
• 第一张图片：类名img-first，绑定grid-area: img-first
• 第一部分文章内容：类名content-front，绑定grid-area: content-front
• 第二张图片：类名img-second，绑定grid-area: img-second
• 剩余文章内容：类名content-rest，绑定grid-area: content-rest

2. 定义桌面端基础Grid布局 #

在媒体查询之前的CSS位置（也就是你现在写Grid相关代码的对应位置），给Grid容器配置基础布局规则，和你现有的桌面端布局逻辑保持一致即可，用grid-template-areas声明区域排列顺序：

/* 桌面端Grid容器基础样式，替换为你现有的布局参数即可 */
.grid-container {
  display: grid;
  /* 桌面端列宽按你实际需求调整 */
  grid-template-columns: 1fr 1fr;
  /* 区域排列顺序，替换为你原有桌面端的实际布局逻辑 */
  grid-template-areas:
    "title title"
    "img-first content-front"
    "content-rest img-second";
  gap: 1.5rem;
  padding-inline: 1rem;
}

/* 绑定每个子元素的grid-area */
.article-title { grid-area: title; }
.img-first { grid-area: img-first; }
.content-front { grid-area: content-front; }
.img-second { grid-area: img-second; }
.content-rest { grid-area: content-rest; }

3. 在已有的手机端媒体查询中重写区域排序 #

直接在你写在CSS底部的媒体查询规则里，把Grid容器改成单列，再按你要求的顺序重新声明区域排列，就能自动实现指定的手机端内容顺序：

/* 手机端媒体查询，保持你现有CSS底部的位置即可 */
@media (max-width: 768px) {
  .grid-container {
    /* 手机端改成单列布局 */
    grid-template-columns: 1fr;
    /* 按需求顺序排列区域，完全匹配你要的逻辑 */
    grid-template-areas:
      "title"
      "img-first"
      "content-front"
      "img-second"
      "content-rest";
  }
}

• 如果你之前的Grid样式是写在HTML头部的内联style标签里，要确保底部媒体查询的样式优先级足够：要么把基础Grid样式统一移到外部CSS的媒体查询前方，要么适当提升媒体查询内选择器的权重，避免内联样式覆盖适配规则。
• 如果不想用区域命名的方式，也可以直接给Grid子元素加order属性调整移动端顺序，比如手机端给标题设order:1、第一张图设order:2、第一部分内容设order:3、第二张图设order:4、剩余内容设order:5，效果一致，但多块元素排序时区域命名的可维护性更强。
• 手机端的断点值可以按你的实际需求调整，不用硬卡768px，可以用浏览器的设备模拟工具调试到合适的切换宽度。

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