使用CSS Grid还原设计稿时圈注区域布局问题咨询

你拆分左右列的思路没有问题，问题出在Grid列轨道定义、元素跨列规则没有和设计稿的留白、对齐要求匹配，按以下步骤调整即可实现目标效果：

核心实现逻辑 #

放弃硬编码固定比例的col类样式，直接给父级.row容器定义标准12列Grid轨道，通过grid-column属性指定每个子元素的跨列范围，配合对齐属性控制元素位置，不需要额外嵌套多余容器。

代码调整 #

1. CSS样式（Content1.css） #

.row {
  display: grid;
  /* 定义12列等宽网格，设置列间距匹配设计稿留白 */
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem;
  align-items: center;
}

/* 文本内容区从第2列开始，跨7列宽度，自动留出左侧1列留白 */
.content1-content {
  grid-column: 2 / 9;
}

.content1-content h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.content1-content h5 {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  color: #4a4a4a;
  margin-bottom: 1rem;
}

.content1-content p {
  line-height: 1.7;
  color: #666;
}

/* 右侧区域从第9列开始，跨4列宽度 */
.col-4 {
  grid-column: 9 / 13;
  min-height: 320px;
  /* 替换为你右侧区域的实际样式，比如背景图、卡片样式 */
  background-color: #f5f5f5;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .row {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .content1-content, .col-4 {
    grid-column: 1 / -1;
  }
}

2. JSX结构优化 #

原来单独占1列的空div完全可以删除，通过Grid的列起始位置直接实现左侧留白，精简后代码如下：

import "./Content1.css";
export default function Content1() {
  return (
    <div className="row">
      <div className="content1-content">
        <h3>Justo Vulputate Tortor Sem</h3>
        <h5>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam deleniti
          aliquam corrupti eius ratione rem veniam. Impedit qui obcaecati minus
          at omnis delectus doloribus suscipit! In nesciunt maiores adipisci
          inventore?
        </h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iusto
          reiciendis harum a cumque itaque non, deleniti, reprehenderit maxime
          necessitatibus eum natus magnam, quasi voluptatem sapiente. Harum
          aliquid facilis inventore.
        </p>
      </div>
      <div className="col-4">
        {/* 插入右侧区域的实际内容，比如图片、装饰卡片 */}
      </div>
    </div>
  );
}

错位效果调整 #

如果目标设计稿存在左右区块上下错落的效果，不需要修改DOM结构，直接给对应元素加对齐属性即可：

• 内容靠上对齐：给对应元素加align-self: start
• 内容靠下对齐：给对应元素加align-self: end
• 自定义偏移：给元素加transform: translateY(偏移值)即可实现任意上下错位

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