CSS Grid的auto-fit属性失效，技能图标响应式布局求助

问题根源 #

1. minmax()语法错误：minmax()仅支持两个参数（最小值、最大值），你传入了三个参数minmax(0.7rem, 2rem, 4rem)，浏览器无法解析该规则，直接导致Grid布局失效。
2. Grid布局应用层级错误：你把Grid属性加在了.skills容器上，但该容器仅包含一个.card子元素，自然只会显示单列。Grid布局应该应用在.card上——它才是承载多个技能项的容器。
3. 固定列数覆盖响应式逻辑：.card的grid-template-columns: repeat(5, auto)强制固定5列，完全覆盖了响应式布局的设置，必须移除。

修复后的代码 #

CSS部分

.skills {
  height: 50vh;
  width: 100%;
  padding-top: 1.8rem;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 7s ease infinite;
  overflow: hidden;
  /* 改用flex居中.card容器，移除无效的Grid属性 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  display: grid;
  /* 正确的auto-fit响应式写法：最小列宽6rem，剩余空间均分 */
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: 1.5rem; /* 添加列间距，避免元素拥挤 */
  width: 90%; /* 限制容器最大宽度，适配不同屏幕 */
}

.skillIcon,
.skillName {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 2.5rem;
  margin: 0.5rem auto; /* 调整margin，优化垂直间距 */
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

JSX部分（无需修改，仅确保结构正确）

import React from "react";

function Skills() {
  return (
    <>
      <section className="skills">
        <div data-aos="zoom-out-down" className="card">
          <div className="content">
            <img className="skillIcon" src="/assets/html5.svg" alt="HTML Icon" />
            <p className="skillName">HTML</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/assets/github.svg" alt="GitHub Icon" />
            <p className="skillName">GitHub</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/assets/node.svg" alt="Node.js Icon" />
            <p className="skillName">NodeJs</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/assets/password.svg" alt="Authentication Icon" />
            <p className="skillName">Authentication</p>
          </div>
          <div className="content">
            <img className="skillIcon" src="/assets/api.svg" alt="API Icon" />
            <p className="skillName">API</p>
          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;

关键修改说明 #

• 将Grid布局从.skills移至.card，使用repeat(auto-fit, minmax(6rem, 1fr))实现响应式：当容器宽度足够时自动增加列数，不足时自动换行，1fr保证列宽均分剩余空间。
• 给.skills添加flex属性实现.card的居中对齐，解决元素挤在中央的问题。
• 增加gap属性优化技能项之间的间距，给.content添加垂直flex布局，确保图标与文字对齐整齐。

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