CSS Grid多区域布局实践_grid-template-areas综合应用

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

.grid-layout {
  display: grid;
  grid-template-areas:
    "head head head"
    "nav  main aside"
    "foot foot foot";
  grid-template-rows: 60px 1fr 50px;
  grid-template-columns: 200px 1fr 150px;
}

.header { grid-area: head; }
.navbar { grid-area: nav; }
.content { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: foot; }

.dashboard {
  display: grid;
  grid-template-areas:
    "a a b"
    "a a c"
    "d e f";
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(3, 180px);
}

.box-a { grid-area: a; }
.box-b { grid-area: b; }
.box-c { grid-area: c; }
.box-d { grid-area: d; }
.box-e { grid-area: e; }
.box-f { grid-area: f; }

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

grid-template-areas:
  "title  title  ."
  "sidebar main   ad"
  ".       footer .";