为何使用grid-template-areas时display: grid布局无法生效？

尝试通过grid-template-areas实现左侧展示图片、右侧展示文字的横竖网格布局，但当前代码无法达到预期效果。

当前代码 #

CSS代码 #

.news__wrapper {
  display: grid;
  grid-template-areas: "a a c" "b b c";
}

.news__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.news__item-image {
  width: 349px;
  height: 360px;
}

.news__item-image {
  background: "url(https://place-hold.it/300x500) 50% 50% no-repeat";
}

HTML代码 #

<div class="news__wrapper">
  <div class="news__item">
    <div class="news__item-image"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem ipsum
      </p>
    </div>
  </div>
  <div class="news__item">
    <div class="news__item-image" :style="imageNews1"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem
      </p>
    </div>
  </div>
  <div class="news__item">
    <div class="news__item-image" :style="imageNews1"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem ips
      </p>
    </div>
  </div>
</div>

当前效果 #

在线演示地址：https://codesandbox.io/s/blissful-bush-tngxm8?file=/src/styles.css

问题原因及修正方案 #

核心问题 #

1. 未为子元素分配grid-area：仅定义了grid-template-areas，但没有给对应的.news__item设置grid-area属性，网格区域无法对应到元素。
2. 背景图片语法错误：background属性值的引号多余，导致背景图无法加载。
3. 布局结构不匹配：预期左图右文，但当前.news__item是flex横向排列，外层grid的区域划分没有匹配预期的布局逻辑。

修正后的代码 #

CSS代码

.news__wrapper {
  display: grid;
  /* 调整网格模板：左侧为图片区域，右侧分为上下两个内容区域 */
  grid-template-areas: 
    "image content-top"
    "image content-bottom";
  /* 设置列宽：左侧图片固定宽度，右侧自适应 */
  grid-template-columns: 349px 1fr;
  /* 设置行高：两行均分高度 */
  grid-template-rows: 1fr 1fr;
  gap: 10px; /* 可选：添加网格间距优化视觉 */
}

/* 绑定左侧图片到对应网格区域 */
.news__item-image--left {
  grid-area: image;
  width: 349px;
  height: 100%; /* 占满左侧两行总高度 */
  background: url(https://place-hold.it/300x500) 50% 50% no-repeat;
  background-size: cover; /* 确保背景图填充容器 */
}

/* 绑定右侧上方内容到对应网格区域 */
.news__item--top {
  grid-area: content-top;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 绑定右侧下方内容到对应网格区域 */
.news__item--bottom {
  grid-area: content-bottom;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news__item-content {
  padding: 1rem;
}

HTML代码

<div class="news__wrapper">
  <!-- 左侧单独的图片元素 -->
  <div class="news__item-image--left"></div>
  <!-- 右侧上方内容块 -->
  <div class="news__item news__item--top">
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem ipsum
      </p>
    </div>
  </div>
  <!-- 右侧下方内容块 -->
  <div class="news__item news__item--bottom">
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem
      </p>
    </div>
  </div>
</div>

修正说明 #

1. 重构网格结构：重新定义grid-template-areas，明确划分左侧图片区和右侧上下两个内容区，匹配左图右文的横竖布局需求。
2. 绑定网格区域：通过grid-area属性将每个元素对应到预设的网格位置。
3. 修复背景图显示：移除多余引号，添加background-size: cover保证图片填充容器。
4. 调整HTML结构：将左侧图片单独提取为一个元素，右侧内容拆分为两个独立块，与网格结构一一对应。

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