不改HTML仅靠CSS实现区块自适应：蓝块高度适配及News布局适配

• 蓝色区块（.b_2）高度需自适应自身内容，且该区块可能不存在于HTML文档中
• 当.b_2存在时，News区块需紧贴其下方
• 当.b_2不存在时，News区块需与红色区块（.b_1）处于同一层级（同排布局）
• 要求仅通过CSS实现，不得修改HTML结构

利用CSS Grid的布局特性结合选择器判断.b_2的存在状态，即可实现需求：

修改后的CSS代码 #

div {
  font-size: 20px;
  font-weight: bold;
}

.gl {
  display: grid;
  grid-template-columns: 500px 200px;
  gap: 20px;
}

.b_1 {
  aspect-ratio: 1;
  background: red;
}

.b_2 {
  background: blue;
  /* 块级元素默认高度由内容决定，无需额外设置即可实现自适应 */
}

.Content {
  background: #0caa27;
  padding: 10px;
  /* 固定Content的网格位置，避免.b_2不存在时布局错乱 */
  grid-column: 1;
  grid-row: 2;
}

.News {
  /* 默认状态（.b_2存在）下，News位于第二列，自动排列在.b_2下方 */
  grid-column: 2;
}

/* 检测到.b_2不存在时，将News调整到第二列第一行，与.b_1同排 */
.gl:not(:has(.b_2)) .News {
  grid-row: 1;
}

原理说明 #

1. .b_2高度自适应：块级元素默认高度由内部内容撑开，无需额外样式即可满足需求。
2. .b_2存在时的布局：.News默认设置grid-column: 2，会被Grid自动放置在.b_2的下方行，实现紧贴效果。
3. .b_2不存在时的布局：通过.gl:not(:has(.b_2)) .News选择器识别.b_2缺失的场景，将.News的行位置设为1，使其与.b_1处于同一行；同时固定.Content的网格位置，确保布局稳定。

兼容旧版浏览器方案 #

如果需要兼容不支持:has()伪类的浏览器，可改用相邻兄弟选择器实现相同逻辑：

/* 当.b_1的下一个直接兄弟是.Content时，说明.b_2不存在 */
.b_1 + .Content ~ .News {
  grid-row: 1;
}

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