我的第一篇文章。我已经看到有一些类似的问题，但似乎没有一个我正在寻找的答案（如果有的话）。
我有一个简单的4行1列网格。
颜色在调整大小时会发生变化（分配给它们适当的网格（即，标题从青绿色变为浅紫色），但行顺序没有变化。
@media only screen and (max-width: 767px) {
body {
display: grid;
grid-template-areas:
'menu'
'header'
'main'
'footer'
;
}
.gridMenu {
background: lightcoral;
}
.gridHeader {
background: turquoise;
}
.gridMain {
background: lightsalmon;
}
.gridFooter {
background: pink;
}
}
/* Tablet - Portrait */
@media only screen and (min-width: 768px) {
/* Grid */
body {
display: grid;
grid-template-areas:
'header'
'menu'
'main'
'footer'
;
}
.gridMenu {
background: palegreen;
}
.gridHeader {
background: palevioletred;
}
.gridMain {
background: lightskyblue;
}
.gridFooter {
background: cornflowerblue;
}
}<body>
<div class="gridMenu">
Menu Here
</div>
<div class="gridHeader">
Header Here
</div>
<div class="gridMain">
Main Here
</div>
<div class="gridFooter">
Footer Here
</div>
</body>任何建议将不胜感激。
谢谢。
Mistake：您只是没有声明grid-area，所以CSS会知道将哪个div放在哪里。还要删除不需要的@media查询并复制CSS属性。
这是您更正的CSS
body {
display: grid;
grid-template-areas:
'menu'
'header'
'main'
'footer'
;
}
.gridMenu {
grid-area: menu;
background: lightcoral;
}
.gridHeader {
grid-area: header;
background: turquoise;
}
.gridMain {
grid-area: main;
background: lightsalmon;
}
.gridFooter {
grid-area: footer;
background: pink;
}
/* Tablet - Portrait */
@media only screen and (min-width: 768px) {
/* Grid */
/* Add only the things you wish to modify */
body {
grid-template-areas:
'header'
'menu'
'main'
'footer'
;
}
.gridMenu {
background: palegreen;
}
.gridHeader {
background: palevioletred;
}
.gridMain {
background: lightskyblue;
}
.gridFooter {
background: cornflowerblue;
}
}