相关疑难解决方法(0)

使用ASCII艺术的网格模板区域无效

什么时候

grid-template-areas:
       "....... header  header"
       "sidebar content content";

Run Code Online (Sandbox Code Playgroud)

改为:

grid-template-areas:
       "....... header  header"
       "sidebar header content";

Run Code Online (Sandbox Code Playgroud)

一切都崩溃了.

如何使用CSS Grid布局实现相同的效果？

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  grid-template-areas: "....... header  header"
                       "sidebar 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;
}

Run Code Online (Sandbox Code Playgroud)