Pulling grid items inward - "grid squeeze"

Question

My grid layout has 2 columns. It contains a mixture of full-width items, which occupy the full width of the grid; and half-width items, which each occupy half the width of a row. Half-width items always come in pairs. The leftmost item should be pulled to the right, and the rightmost should be pulled to the left, in effect being squeezed together.

I have prepared an example with Tailwind-style CSS that demonstrates what I want:

.m-2 { margin: 0.5rem; }
.p-2 { padding: 0.5rem; }
.bg-blue { background-color: rgba(0, 0, 255, 0.5); }
.bg-red { background-color: rgba(255, 0, 0, 0.5); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }

.justify-self-start { justify-self: start; }
.justify-self-end { justify-self: end; }

<div class="grid grid-cols-2">
  <div class="col-span-2 m-2 p-2 bg-blue">
    <p>Full width item</p>
  </div>
  <div class="justify-self-end m-2 p-2 bg-red">
    <p>Half width item</p>
  </div>
  <div class="justify-self-start m-2 p-2 bg-red">
    <p>Half width item</p>
  </div>
  <div class="col-span-2 m-2 p-2 bg-blue">
    <p>Full width item</p>
  </div>
</div>

However, in my scenario, any individual grid item only knows whether or not it is full-width or half-width. If it is full-width, it can set itself to span 2 columns. If it is half-width, it can set itself to span 1 column, but it doesn't know whether to pull itself to the left or the right.

When an individual item doesn't know if it's the first or second item in a half-width row, how can I tell it to pull itself either to the left or to the right?

---

Bonus points for a solution that works with 3 items in a row, with the middle one staying in the centre.

Bonus points for a solution that uses grid-auto-flow to position half-width elements next to each other that don't appear consecutively in the HTML.

Answer 1

The only way that I can think of to solve it using only CSS is setting different elements for your layout, and then using nth-of-type:

.container {
    display: grid;
    grid-template-columns: 200px 200px;
    grid-auto-flow: row dense;
    grid-gap: 4px;
}

span {
    grid-column: span 2;
    background-color: lightblue;
  
}

p {
    width: 70px;
    background-color: lightgreen;
}

p:nth-of-type(odd) {
    justify-self: end;
}

<div class="container">
<span>full</span>
<span>full</span>
<p>half</p>
<span>full</span>
<p>half</p>
<p>half</p>
<span>full</span>
<p>half</p>
<p>half</p>
<p>half</p>
</div>