如何用另一列@media溢出网格列

Question

grid-template-areas: "a a" "b c" 中有 2 行 2 列。当屏幕宽度小于某个值（例如 1100 像素）时，我试图用 c 列溢出 B 列，但是当我更改浏览器大小时，c 列开始超出屏幕而不是浮动在 b 列上方。 grid-template-columns: auto 230px; grid template-rows: 56px auto;. 整个网站看起来像这样：https://jsfiddle.net/a5gb0c7p/ 列“elem1”、“elem2”和“child2”具有预定义的大小。 "child top" 和 "child1" 是自动的，但是 "child1" 是一个显示电子邮件的列，所以它会在某个时候计算出宽度。

TLDR：当网络宽度小于某个值时，我想在调整大小时将 c 列浮动到 b 列上方（在代码编辑器中：将列“child2”浮动到“child1”上方）

Answer 1

如果我认为我对您的理解正确，您希望网格在特定的屏幕宽度处发生变化？

这会是你想要的那种效果吗？ https://jsfiddle.net/jimmythehat/x548ewf9/5/

当浏览器低于 800 像素时，媒体查询会触发并更改网格结构。

代码如下：

.parent2 {
  display: grid;
  grid-template-columns: auto 230px;
  grid-template-rows: 56px auto;
  grid-template-areas: "child0 child0"
                      "child1 child2";
  background: orange;
  border: 5px dotted blue;
}

@media (max-width:800px) {
  .parent2 {
  grid-template-columns: auto;
  grid-template-areas: "child0"
                       "child2" 
                        "child1";
  }
}