css網格網頁-顯示平面網格而不是預期的正方形-有解無憂

我最近開始學習 html 和 CSS。我做了一個非常簡單的 CSS 網格布局，但它產生了一個水平條而不是預期的方形布局。我究竟做錯了什么？

.header {
  grid-area: "h";
}

.sideMenu {
  grid-area: "s";
}

.content {
  grid-area: "c";
}

.footer {
  grid-area: "f";
}

.grid-body {
  display: grid;
  grid-template-areas: 
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
}

<div class="grid-body">
  <div class="header">Header</div>
  <div class="sideMenu">Side Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

uj5u.com熱心網友回復：

正如評論中指出的那樣， grid-area 的值不應該用引號引起來。

一個很好的提示是使用瀏覽器的開發工具檢查工具并查看附加到每個元素的 CSS。在你的代碼片段的情況下，我在網格區域旁邊看到了一個黃色警告三角形，當懸停在它上面時警告我屬性值無效。

.header {
  grid-area: h;
}

.sideMenu {
  grid-area: s;
}

.content {
  grid-area: c;
}

.footer {
  grid-area: f;
}

.grid-body {
  display: grid;
  grid-template-areas: 
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
}

<div class="grid-body">
  <div class="header">Header</div>
  <div class="sideMenu">Side Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

uj5u.com熱心網友回復：

.header {
    grid-area:h;
}

.sideMenu {
    grid-area:s;
}

.content {
    grid-area:c;
}

.footer {
    grid-area:f;
}

.grid-body {
    display:grid;
    grid-template-areas:
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
}

<html>
    <head>
        <title>Grid Experiment :: Home</title>
        <link rel="stylesheet" href="grid_style.css"/>
    </head>

    <body>
        <div class="grid-body">
            <div class="header">Header</div>
            <div class="sideMenu">Side Menu</div>
            <div class="content">Content</div>
            <div class="footer">Footer</div>
        </div>
    </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348814.html

標籤：html css css网格

上一篇：通過選中復選框顯示疊加選單

下一篇：為什么這個*ngFor物件串列只有一些值而不是其他值？