注意:不重復，因為列和行的順序與正常方式不同，特別是對于移動設備

我正嘗試按以下順序在移動設備上顯示此網格布局:

第一行:標題(1列，使用全角) 第二行:主行(1列，使用全寬) 第三行:旁邊(1列使用全寬) 第四行:警報和天氣(2列，各占50%寬度) 第五行:類別和關于(2列，每列使用50%寬度) 第六行:頁腳(1列，使用全角) 首先，我想知道這是否可能，因為我不能讓它工作。

我可以讓它在移動設備上每行顯示1列。但是以這種順序展示對我來說是一種真正的痛苦。我已經嘗試了三天不同的解決方案都沒有成功。

下面是布局的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表格創建一個網頁設計；)

您的網格模板區域已關閉。

試試這些:

grid-template-areas:
    "header header"
    "main main"
    "aside aside"
    "alerts weather"
    "categories about"
    "footer footer ";

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"
    "main main"
    "aside aside"
    "alerts weather"
    "categories about"
    "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;
  }
}

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