CSS grid-template-areas使用问题：仿谷歌首页布局失败求助

常见错误点及解决办法 #

1. 命名匹配问题
   确保元素的grid-area属性值与grid-template-areas中的命名完全一致（大小写敏感），比如你提到的logo区域，对应元素必须设置grid-area: logo;，不能出现拼写错误。

2. 网格行列未定义
   仅声明grid-template-areas无法让容器正确分配空间，必须配合grid-template-rows和grid-template-columns划分行列。针对你要实现的谷歌首页式布局，可参考如下设置：

   .container {
     display: grid;
     grid-template-areas:
       "projects1 projects2 . resume square contact"
       ". . logo logo . ."
       ". . sb sb . .";
     grid-template-rows: auto 1fr auto;
     grid-template-columns: repeat(6, 1fr);
     min-height: 100vh;
   }
   

3. 元素区域归属错误
   给每个对应元素绑定正确的grid-area：

   .projects1 { grid-area: projects1; }
   .projects2 { grid-area: projects2; }
   .logo { grid-area: logo; }
   .sb { grid-area: sb; }
   .resume { grid-area: resume; }
   .square { grid-area: square; }
   .contact { grid-area: contact; }
   

4. 网格区域完整性
   grid-template-areas的每一行必须包含相同数量的单元格，空白区域用.填充，不能出现缺失或多余的命名。

完整修正代码示例 #

HTML

<div class="container">
  <button class="projects1">Projects1</button>
  <button class="projects2">Projects2</button>
  <div class="logo">蓝色Logo</div>
  <div class="sb">SB搜索框</div>
  <a href="#" class="resume">Resume</a>
  <div class="square">下拉菜单</div>
  <a href="#" class="contact">Contact</a>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 1rem;
}

.container {
  display: grid;
  grid-template-areas:
    "projects1 projects2 . resume square contact"
    ". . logo logo . ."
    ". . sb sb . .";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(6, 1fr);
  min-height: calc(100vh - 2rem);
  gap: 1rem;
}

.projects1 { grid-area: projects1; }
.projects2 { grid-area: projects2; }
.logo { 
  grid-area: logo;
  background-color: blue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.sb { 
  grid-area: sb;
  border: 1px solid #ccc;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
}
.resume { grid-area: resume; }
.square { grid-area: square; }
.contact { grid-area: contact; }

/* 顶部元素对齐优化 */
.container > *:nth-child(-n+2) {
  justify-self: start;
  align-self: center;
}
.container > *:nth-last-child(-n+3) {
  justify-self: end;
  align-self: center;
}

如果仍未达到预期效果，请检查：

• 容器是否正确设置了display: grid;
• 有没有其他CSS规则（如position: absolute）干扰网格布局
• 元素自身的宽高是否超出网格区域

内容的提问来源于stack exchange，提问作者cedge113