gridで聖杯レイアウト

<!doctype html>
<head><link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
    <header>a</header>
    <main>a</main>
    <nav>a</nav>
    <aside>a</aside>
    <footer>a</footer>

</body>
</html>

body {
    min-height:100vh;
    display:grid;
    grid-template:
        "header header header" 200px
        "left center right" 1fr
        "footer footer footer" 300px
        / 150px 1fr 200px;
    }

    header {
        grid-area:header;
        border:solid 1px black;
    }

    main {
        grid-area:center;
        border:solid 1px black;
    }

    nav {
        grid-area:left;
        border:solid 1px black;
    }

    aside {
        grid-area:right;
        border:solid 1px black;
    }

    footer {
        grid-area:footer;
        border:solid 1px black;
    }

nav main asideを横並びにしたいのと、高さをちょうどページに収まるくらいにしたいのですが、
どうすれば、よろしいでしょうか。

m.ts10806

2021/02/17 04:34

「聖杯レイアウト」ってなんでしょう。完成予定図がないとなんとも言えないのでは

Lhankor_Mhy

2021/02/17 04:48

ご提示のコードを試してみましたが、ご希望の通りになっているようです。ご質問は何ですか？

dit.

2021/02/17 05:06

恥ずかしながら「聖杯レイアウト」という言葉を知らなかったので調べたのですがこんな名称がついてたのですね。提示のコードを試してみましたがnav main asideは横並びになっていると思います。 https://codepen.io/dit4410/pen/ExNmXYe スタイルシート自体は読み込みができていますか？（背景色を変更するなどわかりやすい箇所で確認してください）文字の変更等は反映されますか？（編集しているものと表示確認しているものが違うということはありませんか）

rasta

2021/02/17 05:23

Chromeだと、質問の通りの表示です。ブラウザの問題でしょうか？

rasta

2021/02/17 05:24

はい。cssは、読み込まれております。

Lhankor_Mhy

2021/02/17 06:54

重複質問を投稿されたようですが、どのようなことでお悩みなのでしょうか。もう少し詳しくご説明いただけますか？表現するための言葉がわからない時は表現の仕方を工夫しましょう https://teratail.com/help/question-tips#questionTips3-3-1 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3

行動規範の内容に同意します

回答2件

IEに対応させるためにはベンダープレフィックスを付ける必要があります。

html
1<body>
2  <header>header</header>
3  <nav>nav</nav>
4  <main>main</main>
5  <aside>aside</aside>
6  <footer>footer</footer>
7</body>

css
1body{
2  min-height:100vh; /* IEでは無効 */
3  display: grid;
4  display: -ms-grid;
5  -ms-grid-columns: 150px 1fr 200px;
6  -ms-grid-rows: 200px 1fr 300px;
7  grid-template:
8    "header header header" 200px
9    "left center right" 1fr
10    "footer footer footer" 300px
11    / 150px 1fr 200px;
12}
13header {
14  -ms-grid-row: 1;
15  -ms-grid-column: 1;
16  -ms-grid-column-span: 3;
17  grid-area: header;
18  border:solid 1px black;
19}
20
21main {
22  -ms-grid-row: 2;
23  -ms-grid-column: 2;
24  display: block; /* IE対策 */
25  grid-area: center;
26  border:solid 1px black;
27}
28
29nav {
30  -ms-grid-row: 2;
31  -ms-grid-column: 1;
32  grid-area: left;
33  border:solid 1px black;
34}
35
36aside {
37  -ms-grid-row: 2;
38  -ms-grid-column: 3;
39  grid-area: right;
40  border:solid 1px black;
41}
42
43footer {
44  -ms-grid-row: 3;
45  -ms-grid-column: 1;
46  -ms-grid-column-span: 3;
47  grid-area: footer;
48  border:solid 1px black;
49}