gridがうまく適用されずレイアウトが崩れます。

今回初めてgridを使ってみようと思ったのですが、かなり初歩で躓いてしまいました。

あまりに初歩の段階でレイアウトが期待通り動かず、対応のしようがなくて調べても解決できませんでした。

どこに問題があるか教えていただきたいです。。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Document</title>
6    <link rel="stylesheet" href="./css/top.css" />
7    <link
8      href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
9      rel="stylesheet"
10    />
11  </head>
12  <body>
13    <header>header</header>
14    <main>main</main>
15    <div class="info">info</div>
16    <div class="menu">menu</div>
17    <div class="about1">about1</div>
18    <div class="about2">about2</div>
19    <div class="system">system</div>
20    <div class="access">access</div>
21    <footer>footer</footer>
22  </body>
23</html>
24

CSS
1/* A Modern CSS Reset */
2
3*,
4*::before,
5*::after {
6  box-sizing: border-box;
7}
8body,
9h1,
10h2,
11h3,
12h4,
13p,
14figure,
15blockquote,
16dl,
17dd {
18  margin: 0;
19}
20ul[role="list"],
21ol[role="list"] {
22  list-style: none;
23}
24html:focus-within {
25  scroll-behavior: smooth;
26}
27body {
28  min-height: 100vh;
29  text-rendering: optimizeSpeed;
30  line-height: 1.5;
31}
32/* a:not([class]) {
33  text-decoration-skip-ink: auto;
34} */
35img,
36picture {
37  max-width: 100%;
38  display: block;
39}
40input,
41button,
42textarea,
43select {
44  font: inherit;
45}
46/* @media (prefers-reduced-motion: reduce) {
47  html:focus-within {
48    scroll-behavior: auto;
49  }
50  *,
51  *::before,
52  *::after {
53    animation-duration: 0.01ms !important;
54    animation-iteration-count: 1 !important;
55    transition-duration: 0.01ms !important;
56    scroll-behavior: auto !important;
57  }
58} */
59
60/* クリアフィックス */
61.clearfix:after {
62  content: "";
63  display: block;
64  clear: both;
65}
66
67.clearfix:before {
68  content: "";
69  display: block;
70  clear: both;
71}
72.clearfix {
73  display: block;
74}
75ul {
76  margin: 0 0;
77  padding: 0;
78}
79
80li {
81  margin: 0 0;
82  padding: 0;
83  list-style: none;
84}
85
86/* ---------------------------------------- */
87
88body {
89  width: 90%;
90  margin: 0 auto;
91  /* min-height: 100vh; */
92  background-color: rgba(58, 216, 236, 0.301);
93  display: grid;
94  grid-template:
95    "...... ...... ...... ...... ...... ...... ......" 100px
96    "...... header header header header header ......"
97    "...... ...... ...... ...... ...... ...... ......" 10px
98    "...... main   main   main   main   main   ......"
99    "...... ...... ...... ...... ...... ...... ......" 10px
100    "...... info   info   info   info   info   ......"
101    "...... ...... ...... ...... ...... ...... ......" 10px
102    "...... ...... menu   menu   menu   ...... ......"
103    "...... ...... ...... ...... ...... ...... ......" 10px
104    "...... about1 about1 ...... about2 about2 ......"
105    "...... ...... ...... ...... ...... ...... ......" 10px
106    "...... system system system system system ......"
107    "...... ...... ...... ...... ...... ...... ......" 10px
108    "...... access access access access access ......"
109    "...... ...... ...... ...... ...... ...... ......" 10px
110    "...... footer footer footer footer footer ......"
111    "...... ...... ...... ...... ...... ...... ......" 10px;
112}
113
114header {
115  grid-area: header;
116}
117
118main {
119  grid-area: main;
120}
121
122.info {
123  grid-area: info;
124}
125
126.menu {
127  grid-area: menu;
128}
129
130.about1 {
131  grid-area: about1;
132}
133
134.about2 {
135  grid-area: about2;
136}