移动端自定义行列顺序响应式网格布局实现求助

注意：此问题并非重复提问，因为移动端的行列顺序与常规布局方式不同

我希望在移动端实现如下顺序的网格布局：

• 第一行：header（整行单列）
• 第二行：main（整行单列）
• 第三行：aside（整行单列）
• 第四行：alerts与weather（两列，各占50%宽度）
• 第五行：categories与about（两列，各占50%宽度）
• 第六行：footer（整行单列）

首先我想确认这种布局是否可行，因为我始终无法实现。我能实现移动端每行单列的布局，但要达成上述特定顺序的布局却困难重重，已经尝试各种方案3天仍未成功。

HTML代码 #

<div class="angry-grid">
  <header>header here</header>
  <main>main here</main>
  <aside>aside</aside>
  <section id="alerts">alerts here</section>
  <section id="weather">weather here</section>
  <section id="categories">categories here</section>
  <section id="about">about us here</section>
  <footer>footer here</footer>
</div>

预期效果示意图 #

存在问题的CSS代码 #

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.angry-grid {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    "main main main aside"
    "alerts weather categories about"
    "footer footer footer footer";
  gap: 0px;
  height: 100%;
}
header {
  background-color: #779999;
  grid-area: header;
  height: 50px;
}
main {
  background-color: #8dd9b5;
  grid-area: main;
}
aside {
  background-color: #dd9b95;
  grid-area: aside;
}
#alerts {
  background-color: #ae69d5;
  grid-area: alerts;
  height: 200px;
}
#weather {
  background-color: #b5e5eb;
  grid-area: weather;
  height: 200px;
}
#categories {
  background-color: #6e7c57;
  grid-area: categories;
  height: 200px;
}
#about {
  background-color: #b5ba58;
  grid-area: about;
  height: 200px;
}
footer {
  background-color: #bdfb59;
  grid-area: footer;
  height: 50px;
}

@media (max-width: 767px) {
  .angry-grid {
    grid-template-areas: "header" "main" "aside" "alerts weather" "categories about" "footer";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 50% 50% 1fr;
  }
}

我几乎要放弃，打算用1995年的HTML表格来做网页布局了;)

解决方案 #

这个布局完全可行，问题出在移动端媒体查询的网格配置逻辑上，修改后即可实现需求：

修改后的CSS（移动端部分） #

@media (max-width: 767px) {
  .angry-grid {
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "main main"
      "aside aside"
      "alerts weather"
      "categories about"
      "footer footer";
    height: auto;
  }
}

关键修改说明 #

1. 整行元素的网格区域设置：将"header"改为"header header"，让header占满两列，main、aside、footer同理，实现整行单列的效果。
2. 行高自适应：把固定比例的行高设置改为auto，让每行高度随内容自动调整，避免比例设置导致的布局错乱。
3. 容器高度重置：移动端去掉固定的height:100%，让容器由内容撑开，更符合移动端浏览逻辑。

这样调整后就能完全实现你想要的移动端布局顺序，不用退回表格布局。

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