聖杯レイアウトにならない

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

    </footer>
    </body>
    </html>

body {
    margin:0;
    display:grid;
    grid-template-rows:100px 1fr 100px;
    grid-template-areas:"header" "wrapper" "footer";
}

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

.wrapper {
    grid-area:wrapper;
    display:grid;
    grid-template-columns:50px 1fr 50px;
    grid-template-areas:"left center right";  
}

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

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

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

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

wrapperのnav center asideの横並びが表示されず、footerがきてます。

rowがheader wrapper footerの３行
wrapperのcolumnがnav center asideの３列にしたいのですが、
どうすれば、よろしいでしょうか。

m.ts10806

2021/02/21 08:10

「聖杯レイアウト」とは。それに同じ質問されてます。 https://teratail.com/questions/323022 質問は編集すれば良いので解決した回答ではない投稿で自己解決したとしてもやり方まずいです。上記質問を「解決済み」から「受付中」に戻し、この質問を削除依頼し、元の質問を編集したうえできちんと解決まで対応してください。

rasta

2021/02/21 08:31

古いものを編集するより、新しくトピを立てた方が、回答を得られる可能性が高いので。

m.ts10806

2021/02/21 08:35 編集

それは自分勝手な思い込みで自分勝手なやり方です。それに非推奨とされているマルチポストです。質問編集すると質問一覧の「アクティブ」タブに上がってきます。同じようなことしてると結局回答者も同じ人が見てるのでどんどん回答が得られにくくなります。

m.ts10806

2021/02/21 08:36

低評価理由に「過去に投稿した質問と同じ内容の質問」というのがある以上、 https://teratail.com/help/avoid-asking サイトとして推奨されていない行為であることが分かるかと。

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

回答1件

ベストアンサー

高さを指定しないと、つぶれてしまいます。

bodyに min-height を設定するか、

css
1body {
2    margin:0;
3    min-height: 100vh;
4    display:grid;
5    grid-template-rows:100px 1fr 100px;
6    grid-template-areas:"header" "wrapper" "footer";
7}

nav center aside に内容を入れれば、その高さになります。

Gridのメリットが生かされてないように思います。
.wrapper で囲むならFlexboxでもシンプルに記述できます。

.wrapperなしでも聖杯レイアウトが可能なのがGridのメリットです。レスポンシブでレイアウトを変更するときに、.wrapperに縛られることなく自由にレイアウトできるのがGridのメリットなので。

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

css
1body {
2  margin:0;
3  min-height: 100vh;
4  display: grid;
5  grid-template-areas:
6    'header header header'
7    'nav main aside'
8    'footer footer footer';
9  grid-template-rows: 100px 1fr 100px;
10  grid-template-columns: 50px 1fr 50px;
11}
12header {
13  grid-area:header;
14  border:1px solid gray;
15}
16nav {
17  grid-area: nav;
18  border:1px solid gray;
19}
20main {
21  grid-area:main;
22  border:1px solid gray;
23}
24aside {
25  grid-area:aside;
26  border:1px solid gray;
27}
28footer {
29  grid-area:footer;
30  border:1px solid gray;
31}