给定样式属性“网格区域”时如何修复我的网格项目不消失

Question

我正在设置一个包含公司员工详细信息的页面。我的问题是我尝试为我的网格项目提供“网格区域”样式属性，以便在为容器定义网格模板区域时可以使用“网格名称”。但突然我的物品消失了。请问我需要做什么来解决这个问题？

 .container{
         border-right: 2px solid grey;
         border-left: 2px solid grey;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-gap: 10px;
         justify-items: center;
         margin-top: 100px; 
         grid-template-areas {
         "head head head"
         "  .  side  ."
         "foot foot foot";
    }
   }



.grid-1{
     display: grid;
     grid-area: head;
}
 .grid-2{
        display: grid;
        grid-area: side;

   }
    .grid-3{
        display: grid;
        grid-area: foot;
   }

我希望我的网格的输出仍然显示，而与使用的“网格区域”样式属性无关，但它会消失。

Answer 1

grid-template-areas 的语法不正确。该值不应用花括号括起来，而应如下所示：

 .container{
  height: 400px;
  width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  grid-template-areas: "head head head"
                       "  .  side  ."
                       "foot foot foot";
}

.grid-1{
  display: grid;
  grid-area: head;
  background-color: pink;
}
 .grid-2{
  display: grid;
  grid-area: side;
  background-color: blue;
}
.grid-3{
  display: grid;
  grid-area: foot;
  background-color: green;
}

<div class="container">
 <div class="grid-1">Header</div>
 <div class="grid-2">Side</div>
 <div class="grid-3">Footer</div>
</div>

Answer 2

似乎可以通过修复grid-template-areas 中的错字并定义grid-auto-rows 来工作。我建议查看可能导致问题的其他一些 CSS 属性，因为您提供的内容通过小修复效果很好。

.container {
  border-right: 2px solid grey;
  border-left: 2px solid grey;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  justify-content: center;
  grid-template-areas: "head head head" ".  side  ." "foot foot foot";
}

.grid-item {
  border: 1px solid black;
}

.grid-1 {
  grid-area: head;
  display: grid;
}

.grid-2 {
  grid-area: side;
  display: grid;
}

.grid-3 {
  grid-area: foot;
  display: grid;
}

<div class="container">
  <div class="grid-item grid-1">Head</div>
  <div class="grid-item grid-2">Side</div>
  <div class="grid-item grid-3">Foot</div>
</div>

Answer 3

查看this 文档，我看到一段说：

首先，您必须使用display: grid 将容器元素定义为网格，使用grid-template-columns 和grid-template-rows 设置列和行大小，然后使用grid-column 和将其子元素放入网格中grid-row.

我看到你使用了grid-template-columns，但没有看到grid-template-rows。将 .container 更改为包含 grid-template-rows 可能会有所帮助，如下所示（对于三行）：

.container{
         border-right: 2px solid grey;
         border-left: 2px solid grey;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: 1fr 1fr 1fr;
         grid-gap: 10px;
         justify-items: center;
         margin-top: 100px; 
         grid-template-areas: "head head head"
                              "  .  side  ."
                              "foot foot foot";
}