css 网格网页 - 显示平面网格而不是预期的正方形答案

【问题标题】：css grid webpage - shows flat grid instead of the intended squarecss 网格网页 - 显示平面网格而不是预期的正方形
【发布时间】：2021-11-04 20:31:06
【问题描述】：

我最近开始学习 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>

【问题讨论】：

grid-area 值周围没有引号。例如。 grid-area: s; 而不是 grid-area: "s";

标签： html css css-grid

【解决方案1】：

正如评论中指出的那样，grid-area 的值不应该用引号引起来。

一个好的提示是使用浏览器的开发工具检查工具并查看附加到每个元素的 CSS。在您使用 sn-p 的情况下，我看到网格区域旁边有一个黄色警告三角形，当悬停时警告我属性值无效。

.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>

【讨论】：

【解决方案2】：

.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>

【讨论】：