如何使Grid布局实现响应式？FCC项目Grid布局问题求助

问题根源 #

你当前的布局冲突来自两个矛盾的设置：

• 给每个项目固定了grid-area（如projects1: 2 / 2 / 3 / 3），强制元素锁定在网格的指定行列位置，完全覆盖了auto-fit/minmax的自动换行逻辑，导致窗口缩小时元素挤在一起无法正常流动。
• grid-template-rows使用auto-fit无意义，auto-fit/auto-fill是针对列的响应式逻辑，行应让网格自动生成或用固定规则定义。

解决方案 #

1. 删除固定定位样式：移除所有projects1~projects6的grid-area设置，让元素自动填充网格，响应式逻辑才能生效。
2. 修正网格行规则：将grid-template-rows改为自适应或固定行数，取消auto-fit。
3. 添加居中对齐：通过Grid属性让网格项和容器本身实现居中显示。

修改后的代码 #

CSS部分

#works {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 让作品网格容器整体水平居中 */
  padding: 20px 0;
}

.works {
  width: 90%;
  max-width: 1200px; /* 限制最大宽度，避免过宽 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(320px, 1fr)); /* 或直接用auto，让行高自适应内容 */
  gap: 24px 18px; /* 合并行/列间距写法 */
  place-items: center; /* 网格项在单元格内居中 */
}

/* 移除所有projects1~projects6的grid-area样式 */

HTML部分（修复重复ID问题）

<section>
  <div class="presentation" id="presentation">
    <h1>Hi, I'm Marwan</h1>
    <p>Junior Web Developer</p>
  </div>
</section>

<!-- lavori -->
<section>
  <div id="works">
    <h2 class="text">These are all my works so far</h2>
    <div class="works">
      <a class="projects projects1" href="#">
        <img class="images" src="http://placekitten.com/200/300" alt="">
        <p class="pj-title"><span class="code">&lt;</span> prova <span class="code">&#47;&gt;</span></p>
      </a>
      <a class="projects projects2" href="#">
        <img class="images" src="http://placekitten.com/200/300" alt="">
        <p class="pj-title"><span class="code">&lt;</span> prova <span class="code">&#47;&gt;</span></p>
      </a>
      <a class="projects projects3" href="#">
        <img class="images" src="http://placekitten.com/200/300" alt="">
        <p class="pj-title"><span class="code">&lt;</span> prova <span class="code">&#47;&gt;</span></p>
      </a>
      <a class="projects projects4" href="#">
        <img class="images" src="http://placekitten.com/200/300" alt="">
        <p class="pj-title"><span class="code">&lt;</span> prova <span class="code">&#47;&gt;</span></p>
      </a>
      <a class="projects projects5" href="#">
        <img class="images" src="http://placekitten.com/200/300" alt="">
        <p class="pj-title"><span class="code">&lt;</span> prova <span class="code">&#47;&gt;</span></p>
      </a>
      <a class="projects projects6" href="#">
        <img class="images" src="http://placekitten.com/200/300" alt="">
        <p class="pj-title"><span class="code">&lt;</span> prova <span class="code">&#47;&gt;</span></p>
      </a>
    </div>
  </div>
</section>

关键修改说明 #

• 移除固定grid-area后，元素会遵循Grid自动流排列，窗口宽度变化时auto-fit会自动调整列数，满足最小宽度就换行。
• place-items: center确保每个图片和文字在网格单元格内居中。
• 给#works添加flex布局，让整个作品网格在页面水平居中，避免左右顶满。
• 修复了重复ID的问题（HTML中ID必须唯一），将id="projects"改为class="projects"。

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