不同@media宽度上的CSS网格顺序答案

【问题标题】：CSS Grid order on different @media widths不同@media宽度上的CSS网格顺序
【发布时间】：2020-03-19 02:21:02
【问题描述】：

我的第一篇文章。我看到有一些类似的问题，但似乎没有一个有我正在寻找的答案（如果有的话）。

我有一个简单的 4 行 1 列网格。

在小于 768 像素的屏幕上，我希望行顺序为：菜单，页眉、主要、页脚
在较大的屏幕上，我希望行顺序为：页眉、菜单、主页脚
（基本上是在不同设备上切换Menu和Header）

调整大小时颜色会发生变化（分配给相应的网格（即标题从青绿色变为淡紫色）），但行顺序不会。

@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>

任何建议将不胜感激。

谢谢。

【问题讨论】：

标签： html css responsive-design css-grid

【解决方案1】：

错误：您只是没有声明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;
  }
}

【讨论】：

天哪，太尴尬了！谢谢！