CSS Grid未生效，如何将项目Div排列为3×2整齐网格？

我来一步步帮你搞定这个Grid布局的问题——你的代码里有几处语法错误和缺失的关键配置，导致3×2的网格没法正常工作。下面是具体的问题分析和修正方案：

一、先修复HTML里的核心错误 #

HTML结构的问题会直接导致CSS无法正确关联元素：

• ID不能包含空格：你写的<div id="Projects and example code">有空格，而CSS里对应的选择器是#projectsandexamplecode，两者完全不匹配，浏览器根本找不到这个容器。要把ID改成projectsandexamplecode（无空格）。
• 重复ID：Project 5和Project 6都用了id="H"，ID在页面中必须唯一，把Project 6的ID改成#I。
• 无效标签与语法错误：
  • 去掉<Project 1>这类自定义错误标签，直接保留内容即可；
  • 修正<div=id="socialmedia"为<div id="socialmedia">；
  • 补全未闭合的链接标签，比如<a href="page2.html" CV</a>改成<a href="page2.html">CV</a>；
  • 图片标签的属性语法错误：width: "940"; height: "150"x;改成width="940" height="150"。

二、修正CSS的语法与Grid配置 #

CSS里的语法错误和缺失的Grid规则是布局失效的关键：

• 清理语法错误：
  • 删掉#A和#main末尾多余的f；
  • 把#container的background: #;改成有效颜色值（比如background: #fff;）；
  • 修正#header的background: #rgb(187, 203, 231);为background: rgb(187, 203, 231);（去掉前面的#）；
  • 给#projectsandexamplecode补上{}，不然后面的Grid配置不会生效。
• 添加Grid核心布局规则：
  给#projects添加grid-template-columns: repeat(3, 1fr);，这会让容器自动分成3等宽列，6个项目元素就会自动排列成2行，实现3×2的网格。
• 优化项目元素样式：
  去掉每个项目（#D到#I）的固定宽高，让Grid自动分配空间，或者用minmax(200px, 1fr)来设置最小宽度，提升响应性。

三、修正后的完整代码 #

修正后的CSS代码 #

div { vertical-align: top; } /* 原text-align: top无效，改成vertical-align */
#container { 
  background: #fff; 
  width: 960px; 
  margin-left: auto; 
  margin-right: auto; 
}
#header { 
  width: 950px; 
  background: rgb(187, 203, 231); 
  text-align: center; /* align-content是Flex/Grid属性，这里用text-align */
}
#A { 
  width: 920px; 
  height: 180px; 
  padding: 5px; 
  margin: 5px; 
  text-align: center; 
}
#B { 
  width: 490px; 
  height: 500px; 
  padding: 5px; 
  margin: 5px; 
  float: right; 
}
#C { 
  width: 410px; 
  height: 725px; 
  padding: 5px; 
  margin: 5px; 
}
#main { 
  width: 940px; 
  background: #E80CC7; 
  text-align: center; 
}
#projectsandexamplecode {
  /* 补全大括号 */
}
#projects { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); /* 核心：3等宽列 */
  grid-gap: 20px; /* 简化间距，你可以根据需求调整 */
  background-image: url("../Images/a.jpeg");
  padding: 20px; /* 加内边距让项目和容器边缘有间距 */
}
#D, #E, #F, #G, #H, #I { 
  height: 138px; 
  border-radius: 5px; 
  padding: 5px; 
  background: rgba(255,255,255,0.8); /* 加半透明白色背景，让文字更清晰 */
}
#socialmedia { 
  display: flex; /* 用Flex排列社交图标更整齐 */
  justify-content: flex-start; 
  background: #40FF40; 
  width: 200px; 
  height: 100px; 
  padding: 10px;
}
#l, #m, #n, #o, #p { 
  margin-right: 15px; 
}
#footer { 
  background: #A005FF; 
  height: 50px; /* 给footer加高度，不然看不到 */
}

修正后的HTML代码 #

<!DOCTYPE HTML>
<html>
<head>
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<!-- 这是我的Div区块，采用基础的A、B、C结构来构建盒子元素 -->
<div id="container">
  <div id="header">
    <div id="A">
      <img id="headerpic" src="images/download.jpeg" width="940" height="150">
    </div>
    <div id="B">
      <img src="images/computopia.jpg" width="280" height="400">
    </div>
    <div id="C">
      站点描述 历史与背景
      <p><cite>"糟糕的程序员关注代码，优秀的程序员关注数据结构及其关系"——林纳斯·托瓦兹</cite></p>
    </div>
    <a href="page2.html">CV</a>
  </div>
  <div id="projectsandexamplecode">
    <div id="projects">
      <div id="D">Project 1</div>
      <div id="E">Project 2</div>
      <div id="F">Project 3</div>
      <div id="G">Project 4</div>
      <div id="H">Project 5</div>
      <div id="I">Project 6</div>
    </div>
  </div>
  <div id="socialmedia">
    <div id="l">Facebook</div>
    <div id="m"><a href="https://www.linkedin.com/in/chris-hudson-23a37118/">Linkedin</a></div>
    <div id="n">Stackoverflow</div>
    <div id="o">GIT-Hub</div>
    <div id="p"><a href="secondwebpage.html">CV</a></div>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

这样修改后，你的项目容器就会呈现出整齐的3×2网格布局，Grid也能正常生效了。

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