在CSS网格中，如何仅在下一个元素为空时才创建元素跨度，而不使用javascript

Question

我正在尝试使用我的 html 元素创建一个模板，如果没有一个约束，这不会很复杂：

html 元素必须都是同级元素！

确实，我使用 divi builder 在 wordpress 的上下文中创建它们，不幸的是，我无法创建包装器 div。

模板如下：

 ---------------- -----------
| title 1        | img 1     |
|----------------|           |
| text 1         |           |
|                |           |
|                |           |
 ---------------- -----------
| title 2        |           |
|---------------- -----------|
| text 2                     |
|                            |
|                            |
 ---------------- -----------
| title 3        | img 3     |
|----------------|           |
| text 3         |           |
|                |           |
|                |           |
 ---------------- -----------

如您所见，如果有图像，它应该位于标题和文本的右侧。如果没有图像，文本应占据所有宽度。

在帖子标题中，我询问了 css 网格中的跨度，但实际上我不在乎它是在 Flex 中还是带有 float 或其他什么，只是我不认为我们可以使用网格以外的其他东西来做到这一点，因为图像必须位于两个元素的右侧，并且我不能使用 div 来包裹它们。

我正在寻找一个仅 css 的解决方案，因为我认为如果存在 css 解决方案，那么没有它太糟糕了。

这是一个包含 js 工作解决方案的代码片段，其中包括在缺少 img 的情况下将 span 添加到元素中：

let imgs = document.querySelectorAll('.img');

imgs.forEach((img) => {
  let child_count = img.childElementCount;
  if (child_count === 0) {
    let next_text = img.nextElementSibling;
    next_text.classList.add('span-column');
  }
});

.wrapper {
  max-width: 700px;
  border: 1px solid blue;
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.wrapper > * {
  border: 1px solid lightblue;
}
.title {
  grid-column: 1;
}
.img {
  grid-column: 2;
  grid-row: span 2;
}
.text {
  grid-column: 1;
}
.span-column {
  grid-column: 1 / span 2;
}

<div class="wrapper">
  <div class="title"><h2>title 1</h2></div>
  <div class="img"><img src="https://www.beatthebear.org/btb-bear.jpeg"></div>
  <div class="text"><p>Deleniti error quae rerum consequatur. Qui aut praesentium maiores non voluptatum et ullam corrupti. Commodi dolorum aut blanditiis quae non. Corrupti vitae aperiam dolorem debitis ut. Accusantium beatae sed et quisquam. Ipsa rerum qui ratione minus ad qui quaerat. Et molestias autem praesentium qui exercitationem in dolore. Facilis velit molestiae illum vitae consectetur doloremque quis voluptatem. Inventore necessitatibus facilis placeat magni est dolores eos veritatis. Laudantium aut sed voluptatem accusamus quo repellat. Ut vel aliquid commodi alias qui modi quo beatae. Consequatur nemo reprehenderit voluptas incidunt sequi a aut saepe. Enim quaerat temporibus aut autem aliquid. Consectetur qui et aspernatur recusandae. Veritatis eius laudantium et voluptatem et inventore. Hic culpa reprehenderit iusto ut qui. Voluptatem mollitia et excepturi qui sint nobis. Aut est magnam distinctio accusantium ea et. Sed sint maxime officia totam maiores. Ut voluptate iure facilis eveniet. Facilis sequi placeat natus voluptas. Ut numquam rem maiores est a cumque. Earum distinctio voluptas id.</p></div>
  <div class="title"><h2>title 2</h2></div>
  <div class="img"></div>
  <div class="text"><p>Deleniti error quae rerum consequatur. Qui aut praesentium maiores non voluptatum et ullam corrupti. Commodi dolorum aut blanditiis quae non. Corrupti vitae aperiam dolorem debitis ut. Accusantium beatae sed et quisquam. Ipsa rerum qui ratione minus ad qui quaerat. Et molestias autem praesentium qui exercitationem in dolore. Facilis velit molestiae illum vitae consectetur doloremque quis voluptatem. Inventore necessitatibus facilis placeat magni est dolores eos veritatis. Laudantium aut sed voluptatem accusamus quo repellat. Ut vel aliquid commodi alias qui modi quo beatae. Consequatur nemo reprehenderit voluptas incidunt sequi a aut saepe. Enim quaerat temporibus aut autem aliquid. Consectetur qui et aspernatur recusandae. Veritatis eius laudantium et voluptatem et inventore. Hic culpa reprehenderit iusto ut qui. Voluptatem mollitia et excepturi qui sint nobis. Aut est magnam distinctio accusantium ea et. Sed sint maxime officia totam maiores. Ut voluptate iure facilis eveniet. Facilis sequi placeat natus voluptas. Ut numquam rem maiores est a cumque. Earum distinctio voluptas id.</p></div>
  <div class="title"><h2>title 3</h2></div>
  <div class="img"><img src="https://www.beatthebear.org/btb-bear.jpeg"></div>
  <div class="text"><p>Deleniti error quae rerum consequatur. Qui aut praesentium maiores non voluptatum et ullam corrupti. Commodi dolorum aut blanditiis quae non. Corrupti vitae aperiam dolorem debitis ut. Accusantium beatae sed et quisquam. Ipsa rerum qui ratione minus ad qui quaerat. Et molestias autem praesentium qui exercitationem in dolore. Facilis velit molestiae illum vitae consectetur doloremque quis voluptatem. Inventore necessitatibus facilis placeat magni est dolores eos veritatis. Laudantium aut sed voluptatem accusamus quo repellat. Ut vel aliquid commodi alias qui modi quo beatae. Consequatur nemo reprehenderit voluptas incidunt sequi a aut saepe. Enim quaerat temporibus aut autem aliquid. Consectetur qui et aspernatur recusandae. Veritatis eius laudantium et voluptatem et inventore. Hic culpa reprehenderit iusto ut qui. Voluptatem mollitia et excepturi qui sint nobis. Aut est magnam distinctio accusantium ea et. Sed sint maxime officia totam maiores. Ut voluptate iure facilis eveniet. Facilis sequi placeat natus voluptas. Ut numquam rem maiores est a cumque. Earum distinctio voluptas id.</p></div>
</div>

Answer 1

使用这些选择器：

.wrapper .img:empty + .text {
  grid-column: 1 / span 2;
}