grid布局导致home__scroll样式显示异常问题排查求助

数据老陈

2026-7-6

Grid布局样式异常排查与修复

核心问题分析与排查点

1. Grid容器声明缺失

你的.home__content和.home__container都使用了grid-template-columns、gap这类Grid专属属性，但完全没设置display: grid——Grid属性只有在容器明确声明为Grid布局时才会生效，否则容器还是默认的块级元素，布局逻辑混乱，间接影响包括.home__scroll在内的子元素样式渲染。

修复示例：

.home__container{
  display: grid; /* 必须添加，gap属性才会生效 */
  gap: 1rem;
}

.home__content{
  display: grid; /* 必须添加，grid-template-columns才会生效 */
  grid-template-columns: .5fr 3fr;
  padding-top: 3.5rem;
  align-items: center;
}

2. `.home__scroll`的布局上下文问题

当前.home__scroll不在任何Grid容器内，父元素是普通<section>。你提到“声明Grid相关配置后样式生效”，大概率是因为之前的样式被全局规则/父元素属性（比如overflow、position）意外覆盖，或者DOM解析异常导致样式不渲染。

给.home__scroll添加明确布局属性即可解决：

.home__scroll{
  display: flex; /* 替换注释的display:none，用你需要的布局方式 */
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}

3. HTML结构错误

你的HTML存在多处未闭合的<a>标签，浏览器解析DOM时会出现异常，间接影响样式渲染：

<!-- 错误示例 -->
<p class="home__description">...</p>
</a> <!-- 无对应起始标签的多余闭合标签 -->
<a href="#contact" class="button button--fiex">...</a>
</a> <!-- 重复闭合标签 -->

修复后：

<div class="home__data">
  <h1 class="home__title">I'am mijoung</h1>
  <h3 class="home__subtitle">Frontend developer</h3>
  <p class="home__description">High level experience in web design and development knowledge, producing quality work.</p>
  <a href="#contact" class="button button--flex">
    Contact Me <i class="uil uil-message button__icon"></i>
  </a>
</div>