css Question posted in
Some basic documentation can be found here.

in css grid, how to make an element span only if next element is empty, without javascript

I’m trying to create a template with my html elements, that would not be complicated if it was not for one constraint :

the html elements have to be all siblings !

indeed, I create them in the context of wordpress with divi builder, I have no possibility to create wrapper divs, unfortunately.

the template is the following :

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

as you can see, if there is an image, it should be on the right of both the title and the text. If there is no image, the text should take all width.

In the post title i asked about span in css grid, but I actually don’t care if it’s in flex or with float or whatever, it’s just that I don’t suppose we can do it with something else than grid, since the image must be to the right of two elements and I cannot use divs to wrap them.

I’m looking for a css only solution, because I think it’s too bad not to have a css solution if it exists.

Here is a code snippet with a js working solution, that consists in adding the span to the element if the img is missing :

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>
Tags:

2

Answers


  1. 0

    Use these selectors below, and make sure .img is fully empty, not even a whitespace.

    .wrapper .img:empty + .text {
  grid-column: 1 / span 2;
}
    Login or Signup to reply.
  2. 0

    :empty and :has are your friends

    .wrapper {
  max-width: 700px;
  border: 1px solid blue;
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.wrapper > * {
  border: 1px solid lightblue;
}
.title {
  grid-column: 1;
}
/*
.title:has(+.img:empty) {
  grid-column: span 2;
}
*/
.img {
  grid-column: 2;
  grid-row: span 2;
}
.img:empty {
  display: none;
}
.text {
  grid-column: 1;
}
.img:empty+.text {
  grid-column: span 2;
}
.span-column {
  grid-column: 1 / span 2;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search