Building a horizontal hierarchy using Grid
First, thank you for offering general help on grid. Some background for me is that I've been doing HTML forever, css a little less than forever, but I'm just learning grid. I'd always done it with tables and I'm trying to find a better way. This recent project requires me to display a hierarchy of content horizontally in the browser (the width is a fixed nine columns, but the height can be extremely variable). I need it to adjust to some extent.
The difficulty with the hierarchy is the the first column contains rows that must span several rows in column two, and column two must span several rows in column three, while column three lines up with columns 4-9 and doesn't span anything. I pared the whole thing down to a bare minimum and put them into two codepens, one for the way I'm doing it now with tables and one for how it seems it should work with divs instead of tables. The page is being generated dynamically in .net so I can organize the divs any way that makes sense, but I'm really hoping not to have to generate the styles dynamically as well as the content. I figure this is just my lack of understanding.
First, here is the table layout: https://codepen.io/42degrees/pen/jKMrBq It creates a row for each column that spans other rows with the rowspan generated in code. This is my goal layout, but I'm not married to any particular format as long as it is visually clear. The content blocks will each contain a variable, but possibly large, amount of data.
Second, here is my attempt to do it more simply with divs: https://codepen.io/42degrees/pen/vrXLJL In this case I'm building the hierarchy in nested divs. It seems like having the divs nested would be the only way to communicate the relationship between the rows and columns. Maybe there's a better way to do that? I could generate a slew of completely disconnected divs (each with unique IDs or styles) and try to generate a massive stylesheet server-side to brute-force place each cell in the hierarchy, but this seems like even more work (and harder to debug) than the table method.
Thanks in advance for any suggestions you can offer!