FreeCodeCamp项目中CSS Grid属性失效问题求助

问题根源及修复步骤 #

1. Grid关键字拼写错误
   你的grid-template-columns里用了autofit，正确的关键字是auto-fit，这是导致Grid布局完全不生效的核心原因。

2. 网格项元素类型问题
   <a>标签默认是行内元素，Grid容器的直接子元素如果是行内元素，无法被正确识别为网格项。需要把<a>设置为块级元素。

3. 图片宽度限制
   .img类设置了width: 40%，这会让图片只占父容器的40%，无法填满网格项，应该改成width: 100%让图片自适应网格项宽度。

4. HTML冗余标签
   你的HTML末尾多了一个</div>，需要删除，避免结构混乱。

修正后的代码 #

CSS代码

#projects {
  padding: 3rem 2rem;
  width: 100%;
  background-color: #3c6382;
  /* 移除不必要的height设置，避免布局异常 */
}

#projects h2 {
  text-align: center;
  text-decoration: underline;
  color: #c8d6e5;
  font-size: 2rem;
}

.img {
  margin-top: 4rem;
  width: 100%; /* 修改为100%填满网格项 */
  border: 0.5rem solid white;
  box-sizing: border-box; /* 让边框包含在宽度内，防止溢出 */
}

.project-title {
  color: white;
  font-size: 1.5rem;
  text-align: center; /* 文字居中更符合作品集布局 */
  margin: 1rem 0; /* 调整margin，移除左侧偏移 */
}

#projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 修正auto-fit拼写 */
  gap: 2rem; /* 给网格项添加间距，提升美观度 */
}

#projects-grid a {
  display: block; /* 将a标签设为块级元素，确保被识别为网格项 */
}

HTML代码

<section id='projects'>
  <h2>Here are some of my Projects:</h2>
  <div id="projects-grid">
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
      <p class='project-title'>Tribute page</p>
    </a>
    <a href="">
      <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img">
      <p class='project-title'>Tribute page</p>
    </a>
  </div>
</section>

额外优化说明 #

• 添加gap: 2rem给网格项之间设置间距，让布局更透气。
• 给.img加上box-sizing: border-box，避免边框导致图片超出网格项范围。
• 调整.project-title的对齐方式和边距，让文字居中显示，更符合作品集的视觉效果。

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