How to span a grid cell across all dynamic rows?

Question

The attached example works properly, the first child of .container is spanned across all rows, but the problem is that the grid-row-end value is dependent on a number of children of div.container. Is it possible to do it without the magic constant (4) and WITHOUT changing an HTML structure. Unfortunately using grid-row-end:-1 is possible only for the explicit grids.

    .container {
        display:grid;
        grid-gap: 0.4em;
    }
    .container > * {
        background-color: lightgray;
    }
    .container *:first-child {
        grid-column: 1;
        grid-row-start: 1;
        grid-row-end: 4;
    }
    .container *:not(:first-child) {
        grid-column: 2;
    }

<div class="container">
    <div>IMG</div>
    <div>A</div>
    <div>B</div>
    <div>...</div>
</div>

This was asked already https://stackoverflow.com/q/44052336/383904 — Roko C. Buljan, Dec 01 '20 at 13:29
if you remove the gap properie and dispatch margin on the childrens (standing in the second column and from the second row, you can set a hudge value that the possible numbers will never match or be at the most the same amount — G-Cyrillus, Dec 01 '20 at 13:30

G-Cyrillus · Answer 1 · 2020-12-01T15:01:26.990

This was asked already Make a grid item span to the last row / column - Roko C. Buljan

if you remove the gap propertie and instead dispatch margin on the children (standing in the second column and from the second row, you can set a hudge value that the possible numbers will never match or be at the most the same amount of actual rows of the grid – G-Cyrillus

the linked question did not take into account the gap set.

snippet drawing of my comment:

.container {
        display:grid;  
    }
    .container > * {
        background-color: lightgray;
    }
    .container *:first-child {
        grid-column: 1;
        grid-row-start: 1;
        grid-row-end: 100;/* use a value that will over the expected numbers of row */
        grid-gap:0; /* empty rows will collapse to none height */
        grid-auto-rows:auto; /* do not give an height here , else empty rows will use space */
        margin-right:0.2em;
    }
    .container :nth-child(2)   {
        margin-left:0.2em;
        grid-column:2;
    }
    .container :nth-child(2) ~ div  {
        grid-column:2;
        margin-top:0.4em;
        margin-left:0.2em;
    }

<div class="container">
    <div>IMG</div>
    <div>A</div>
    <div>B</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Edit

If javascript is okay with you

let rowsToSpan = document.querySelectorAll(".container>*");
rowsToSpan[0].style.gridRowEnd = rowsToSpan.length

.container {
  display: grid;
  grid-gap: 0.4em;
}

.container>* {
  background-color: lightgray;
}

.container *:first-child {
  grid-column: 1;
  grid-row-start: 1;
  /*grid-row-end: 4;*/
}

.container *:not(:first-child) {
  grid-column: 2;
}

<div class="container">
  <div>IMG</div>
  <div>A</div>
  <div>B</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

inspired from https://codepen.io/gc-nomade/pen/pRYPwK

Thank you. I also found the solution with grid-row-end:BIG_NUMBER. It is not a nice solution, I will have to find a different solution... — LiBorecek, Dec 01 '20 at 13:49
@LiBorecek a different solution is to use javascript to set the right amount of rows to span ... you did not use the javascript tag, would that be your other option ? — G-Cyrillus, Dec 01 '20 at 14:48
Yes, I used javascript to set the grid-row-end value. I wanted to solve it only with CSS. The CSS Grid layout is very powerful, I am surprised that it cannot solve so simple case. — LiBorecek, Dec 02 '20 at 09:01
@LiBorecek *un* -fortunately, CSS is not meant to look through the dom to rewrite or update a few rules. The browser , while rendering the dom structure and its content will also apply the CSS selectors that matches the dom elements (if it can/if it is valid) . There is no way to select a parent for instance or to update a colspan/rowspan attribute nor to count the nunber of elements it founds, it can increase a counter (CSS counter) but is not aware of that value and cannot reuse it elsewhere. **That's a tipycal javascript job** even if `span all` seems awfully missing in the spec ;) — G-Cyrillus, Dec 02 '20 at 09:26

How to span a grid cell across all dynamic rows?

1 Answers1

Linked