グリッドレイアウトレイアウトでうまく表示されない

[次のURL]https://qiita.com/kura07/items/e633b35e33e43240d363
でグリッドレイアウトレイアウトの練習中ですが、サンプルコードがうまく表示されません。

これがサンプルコード表示ですが、実際には
その下のように表示されます。

itemの設定をgrid-row: 1 / 2;　　grid-column: 2 / 3;のようにしてみたのですが、同じような結果になりました。
どうすればサンプルのようになるでしょうか。

お願いいたします。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>CSS Grid Layout（グリッドレイアウト）</title>
6    <link href="css/column2-e.css" rel="stylesheet">
7</head>
8
9<body>
10    
11    <h1>タイトル</h1>
12    
13    <nav>ナビ</nav>
14    
15    <main>メイン</main>
16        
17    <aside id="ad">広告</aside>
18
19    <aside id="side">サイド</aside>
20
21    <footer>フッター</footer>
22
23    
24    
25</body>
26</html>
27

css
1/* urlのコード */
2@charset "utf-8"
3
4body {
5    display: grid;
6    margin: 0;
7    min-height: 100vh;
8    grid-template-rows: 100px 100px 1fr 100px;
9    grid-template-columns: 100px 1fr 100px;
10    grid-template-areas:
11        "title  title  title "
12        "nav    main   ad    "
13        "nav    main   side  "
14        "footer footer footer";
15}
16body > * {
17    margin: 3px;
18    padding: 10px;
19}
20h1 {
21    grid-area: title;
22    background: #faa;
23    border-radius: 10px 10px 0 0;
24}
25main {
26    grid-area: main;
27    background: #afa;
28}
29nav {
30    grid-area: nav;
31    background: #aaf;
32}
33#side {
34    grid-area: side;
35    background: #faf;
36}
37footer {
38    grid-area: footer;
39    background: #aaa;
40    border-radius: 0 0 10px 10px;
41}
42#ad {
43    grid-area: ad;
44    background: #888;
45}
46
47
48