css - CSS 网格 - 桌面上的两列和移动设备上的 1 列

Question

这就是我想要实现的目标：

在桌面/大屏幕上 - 左侧的 30% 和右侧的大约 70%

在移动/较小的屏幕上 - 右侧在左侧的顶部

这是我到目前为止所拥有的。我有一种感觉，我正在使用右边的网格，或者至少我没有达到我上面的目标......

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto;
  grid-template-areas: "sidebar content content content";
  background-color: #fff;
  color: #444;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

@media (max-width: 768px) {
  grid-template-rows: repeat(auto, 1fr);
  grid-template-areas:
    "content"
    "sidebar";
}

<div class="wrapper">
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
</div>

最好的方法是什么？

标签： csscss-grid

Answer 1

您忘记.wrapper在媒体查询中将 css 包装在类中

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto;
  grid-template-areas: "sidebar content content content";
  background-color: #fff;
  color: #444;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

@media (max-width: 768px) {
  .wrapper {
     grid-template-rows: repeat(auto, 1fr);
      grid-template-areas:
    "content"
    "sidebar";
  }
}

<div class="wrapper">
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
</div>

jsfiddle链接