Addendum: I just noticed two complications with the above approach. First you have a lot of <br> tags, which will break up the flow so they all need removing.
And the way you have laid out the html, everything in one column, then everything in the next column, means you need to add an extra step - force the attributes to flow downwards, a certain number of rows, and then go to the next row. But that is pretty easy to do in Grid CSS. So for full clarity, here's the complete skills section, in HTML and CSS: https://gist.github.com/G-G-G/8df5077bdff6fcabaa10c8ae1ca33c75
Changes to html
- removed all the divs under div three.
- all the <p> were changed to <span>
- removed all <br>
Changes to CSS: changed it to this:
div.sheet-three {
grid-area: three;
display: grid;
grid-gap: 4px;
grid-template-columns: 1fr 9fr 2fr 1fr 9fr 2fr 1fr 9fr 2fr;
grid-template-rows: 2em repeat(17, 1em);
grid-auto-flow: column;
border-style: solid;
border-width: thin;
padding: 5px;
}
div.sheet-three h2 {
grid-column: 1 / -1;
}
This is it - all the CSS needed to make the rows work.
Grid-template-columns automatically sorts all html items beneath the container into the specified number of columns. You have 9 columns here, so if there were 30 items, it would sort them into three rows of 9, followed by a single row of 3.
grid-auto-flow: if not specified, CSS Grid will have all the items flowing from left to right, and then down into the next row. If we set it as column, it will flow down the row, one column at a time. For this to work properly, we have to tell it how many rows to use. And so we have
grid-template-rows: 2em repeat(17, 1em);
This sets the height of each row. We have one double height row, following by 17 normal height rows.
The double height row is for the header.
And for the header, we add the final CSS, grid-column, to force it span over one entire row.
The technique described here can be used on the rest of your sheet to make the css a lot simpler.