CSS Gridで聖杯レイアウト

- 3カラム
- レスポンシブ対応無し
- ヘッダ固定無し
- GoogleChromeでのみ動作確認

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid - Holy Grail Layout Template【Not Responsive】</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            width: 1024px;
            margin: 0 auto;
            padding: 5px 10px;
            display: grid;
            grid-template-areas:
                "header header header"
                "nav    main   aside"
                "footer footer footer";
            grid-template-rows: auto 1fr auto;
            grid-template-columns: 200px 1fr 200px;
            grid-gap: 5px;
        }

        header,
        nav,
        main,
        aside,
        footer {
            padding: 5px 15px;
            border: 1px solid black;
            border-radius: 8px;
        }

        header {
            grid-area: header;
            text-align: center;
        }

        nav {
            grid-area: nav;
        }

        main {
            grid-area: main;
        }

        aside {
            grid-area: aside;
        }

        footer {
            grid-area: footer;
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <h1>This is header</h1>
    </header>
    <nav>
        <h2>This is nav</h2>
        <h3>Category</h3>
        <ul>
            <li>Category1</li>
            <li>Category2</li>
            <li>Category3</li>
        </ul>
    </nav>
    <main>
        <h2>This is main</h2>
        <section>
            <article>
                <h3>What is Lorem Ipsum?</h3>
                <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the
                    industry's standard
                    dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
                    make a type specimen
                    book. It has survived not only five centuries, but also the leap into electronic typesetting,
                    remaining essentially
                    unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                    Ipsum passages, and more
                    recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>
            </article>
            <article>
                <h3>What is Lorem Ipsum?</h3>
                <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the
                    industry's standard
                    dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
                    make a type specimen
                    book. It has survived not only five centuries, but also the leap into electronic typesetting,
                    remaining essentially
                    unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                    Ipsum passages, and more
                    recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>
            </article>
        </section>
    </main>
    <aside>
        <h2>This is aside</h2>
        <h3>Archives</h3>
        <ul>
            <li>Apr 19 2019</li>
            <li>Apr 18 2019</li>
            <li>Apr 17 2019</li>
            <li>Apr 16 2019</li>
            <li>Apr 15 2019</li>
        </ul>
    </aside>
    <footer>
        <h2>This is footer</h2>
    </footer>
</body>

</html>
```