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

Question

我的第一个 post。我已经看到有几个类似的问题，但 none 似乎有我正在寻找的答案（如果有的话）。

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

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

颜色在调整大小时会发生变化（分配给相应的网格（即 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>

任何建议将不胜感激。

谢谢。

Answer 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;
  }
}

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

CSS Grid order on different @media widths

html

css

responsive-design

css-grid