3 replies

CSS Grid Layout with an element spanning dynamic number of grid rows

I'm not sure if this is possible but I thought I would ask before I resort to manipulating the dom with javascript since I don't have control of the html. I have a page with a dynamic number of sections and I need to create a 2 column layout for those sections. The first section needs to go into the first column and span all the rows created by the rest of the sections. Since the number of total sections is dynamic, I can't use

grid-row: 1 / -1;

grid-row: 1 / -1;

I'd have to do something like

grid-row: span 200;

grid-row: span 200;

but I also need this first section to be position sticky and this prevents that from working. The only other thing I can think of is using javascript to wrap all the other sections in a div so I only have 1 row within the grid to worry about.
Here is a code pen example of the basic layout I'm going for but I can't use the

grid-row: span 3;

grid-row: span 3;

that is in the example since I won't know how many rows there could be. https://codepen.io/shborrowman/pen/yyBPNmd

Does anyone know if this is even possible or is the javascript route of placing all but the first section inside a div the only way to go?

CodePenScott

Grid layout example

...