I am doing a cattle site and have to display hundreds of cattle pedigrees. A pedigree is like a genealogy.
On my old site I just used a table and many column and row spans. It works.
I am trying to up my skills to rebuild a site and while exploring CSS Grid, decided to try to use that for a pedigree. The problem is that it seems a very unwieldy way to display that type of information.
My html/table only method takes 92 lines of code only and the HTML/CSS with CSS Grid takes 221 lines of code. I used grid-area to position each element and if I had used grid-template-areas, it might have been a few less lines of code.
Here are examples of the two.
I am wondering if there is a better way to do this?
Also, in my new design, I want to have responsive design and will need to drop the last column and brackets for phone layouts.