网格布局问题：无法让文本跨两列并居中显示

问题描述 #

我遇到了CSS Grid布局的问题，无法让文本在两列网格中居中显示，同时无法实现文本跨两列展示。我尝试过设置align-items、100%宽度及固定宽高，请问是否需要使用定位来解决？

原代码 #

CSS #

.hero {
  display: grid;
  grid-template-columns: repeat(2, 33.45rem);
  grid-template-rows: 12.5rem;
  border-bottom: .05em solid #05d31f;
  width: 69.8rem;
  height: 16.5rem;

}

.hero-title {
  grid-row-start: 1;
  grid-column-start: 1;
}

.hero-title h2 {
  margin: 0;
  line-height: 0.2rem;
  letter-spacing: 0.3rem;
}

.hero-text {
  grid-row: 1;
  grid-column-start: 1;
  grid-column: span 2;
  align-items: center;
}

.hero-text p {
  font-size: .7rem;
  line-height: 1.5rem;
  letter-spacing: 0.2rem;
}

HTML #

<div className="hero">
      <div className="hero-title">
          <h2>FrontEnd Development with CLASS</h2>
      </div>
      <div className="hero-text">
          <p>
          I am a Front End Web developer with a passion for 
          building scalable, maintainable, and accessible 
          web applications. I have a strong background in
          HTML, CSS, Javascript, and REACT. I am always looking
          for new challenges and
          opportunities to grow and learn.
          </p>
      </div>
</div>

问题分析 #

• 元素重叠：.hero-title和.hero-text都设置在同一网格行（grid-row:1），导致两个元素重叠，文本跨列效果被覆盖。
• 居中属性误用：align-items是Grid容器的属性，不能直接应用于子元素；且未设置水平对齐相关属性，无法实现整体居中。
• 高度不匹配：容器height大于网格行总高度，多余空间导致居中视觉效果异常。

修正方案 #

优化后的CSS #

.hero {
  display: grid;
  grid-template-columns: repeat(2, 33.45rem);
  /* 改为两行布局，分别容纳标题和文本 */
  grid-template-rows: auto auto;
  gap: 1rem; /* 添加间距提升排版 */
  border-bottom: .05em solid #05d31f;
  width: 69.8rem;
  /* 移除固定高度，让内容决定容器高度 */
  /* height: 16.5rem; */
  /* 容器内元素水平+垂直居中 */
  align-items: center;
  justify-items: center;
  padding: 2rem 0; /* 添加内边距优化上下空间 */
}

.hero-title {
  /* 标题跨两列，实现水平居中 */
  grid-row: 1;
  grid-column: 1 / -1;
}

.hero-title h2 {
  margin: 0;
  line-height: 1.2; /* 修正行高，避免文字重叠 */
  letter-spacing: 0.3rem;
  text-align: center; /* 文本自身居中 */
}

.hero-text {
  grid-row: 2;
  grid-column: 1 / -1; /* 跨两列，等同于span 2 */
  width: 100%; /* 确保文本块占满列宽 */
}

.hero-text p {
  font-size: .7rem;
  line-height: 1.5rem;
  letter-spacing: 0.2rem;
  text-align: center; /* 文本自身居中 */
  margin: 0;
}

关键调整说明 #

1. 重构网格结构：将网格设置为两行，让标题和文本分别占据一行，彻底解决元素重叠问题，同时自然实现文本跨两列。
2. 修正居中逻辑：在Grid容器.hero上设置align-items（垂直居中）和justify-items（水平居中），同时给文本元素添加text-align: center，实现内容自身居中。
3. 排版细节优化：修正标题行高避免文字重叠，添加间距和内边距提升整体美观度。
4. 无需定位：完全通过Grid自身的布局属性就能解决问题，定位会破坏Grid的响应式和布局逻辑，不建议使用。

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