Down then Across w/ Headers

[jonesiscoding]

Rachel,

I'm mostly looking to clarify if something like this is possible with CSS Grid. I've tried a few things to replicate it without full success. That leads to me to believe that I was either close, or entirely misguided.

Here is the scenario:

• All elements are siblings (table rows, actually), in an arbitrary number.
• Some elements are intended to span across all "columns", as "header" rows.
• The other elements should be arranged in columns, in "down, then across" order.
• The number of elements between each "header" is arbitrary.
• I cannot control the markup, other than to add CSS classes.

It may be easier to see in this CodePen: https://codepen.io/jonesiscoding/full/KRybjv/ (Note: Does not work in Firefox, see below)

This seems to be possible using CSS columns for every modern browser other than Firefox using column-count (for the parent) and column-span (for the "header" rows). Unfortunately, Firefox does not support column-span. I have a JS alternative that can fix the issue only for FF, but would rather not go down that road if I do not have to.

It seemed like it would be possible with CSS grid from some of what I was seeing and reading. That said, I could be totally on the wrong..... track. :)

Thank you for any insight you can lend!

[webcraftsman]

@jonesiscoding It is possible to achieve the layout you want with CSS Grid. You can define an implicit grid and then explicitly place the items on the Grid (with some items implicitly placed).

Here is a CodePen solution with comments about the code I added to your example: https://codepen.io/webcraftsman/pen/deZLKa

This solution would only be practical if you know the number of items and that number does not change. I tried coming up with a more flexible solution and was not successful.