CSS Grid 模板区域的顺序错误答案

【问题标题】：CSS Grid template areas in wrong orderCSS Grid 模板区域的顺序错误
【发布时间】：2020-07-24 08:24:55
【问题描述】：

当屏幕尺寸低于 800 像素时，我试图将“导航”div 置于“地图”div 下方。我使用 grid-template-areas 来定位元素，但是当屏幕缩小时，模板区域的顺序是错误的。

.wrapper {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
  grid-template-columns: 300px 1fr;
  grid-template-areas: "nav map"
}

.a {
  grid-column: nav;
}

.b {
  grid-column: map;
  background: blue;
}

.box {
  border: black 1px solid;
  color: #000;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

@media only screen and (max-width: 800px) {
  .wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: 300px 1fr;
    grid-template-areas: "map" "nav"
  }
}

<div class="wrapper">
  <div class="box a">nav</div>
  <div class="box b">map</div>
</div>

小提琴： https://jsfiddle.net/fmkb4jav/45/

【问题讨论】：

grid-template-areas 应该是空格而不是引号
我已经改变了，但结果与预期的相差甚远。
@AliSheikhpour 他的网格模板区域是正确的
错字问题：grid-column --> grid-area（投票结束为错字）
不要在问题中添加解决方案。最好删除它，因为它稍后会被关闭并删除

标签： css css-grid

【解决方案1】：

您在课程中指定了grid-column 而不是grid-area。

.wrapper {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
  grid-template-columns: 300px 1fr;
  grid-template-areas: "nav map"
}

.a {
  grid-area: nav;
}

.b {
  grid-area: map;
  background: blue;
}

.box {
  border: black 1px solid;
  color: #000;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

@media only screen and (max-width: 800px) {
  .wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: 300px 1fr;
    grid-template-areas: "map" "nav"
  }
}

<div class="wrapper">
  <div class="box a">nav</div>
  <div class="box b">map</div>
</div>

【讨论】：