Custom Sheet CSS grid - Dynamically resizing sections

I've been working on updating an old custom sheet my friend uses for fire emblem campaigns from tables to grids. I've gotten the majority of it translated and working/looking as intended, but I'm encountering one problem on the main tab of the sheet. The sheet has two columns, one for character info/stats and the other for notes/derived stats. In the old sheet expanding the weaknesses drop down would end up with the columns being different heights which looked ugly. To try and prevent this, I put that whole section in a grid so that both sides would stay the same height. This 'works' in that both sides resize to match on expanding/collapsing, but it does so by increasing the height of each distinct area in the grid, see attached images. My intended outcome was for the notes section in the right column to increase/decrease in size to match the left column while leaving the other sections unaffected. I've never worked with css/html prior to this, so I'm hoping there's a simple solution that I've overlooked here. I've linked the relevant portions here: CSS and HTML

Looking at your CSS, one simple solution occurrs to me. You have this: grid-template-areas : "info notes"                         "info notes"                         "vals notes"                         "vals notes"                         "stats notes"                         "stats derive"                         "stats derive"                         "stats derive"                         "stats derive"                         "stats derive" ; By the way, this should be: grid-template-areas : "info notes"                         "vals notes"                         "stats derive" You don't need to repeat identical rows - the grid will organise its size itself. To your question, you could change this to something like grid-template-areas : "left notes"                         "stats derive" ; Then create a div with grid name left , and put the info, and vals divs inside it. Though the foregoing probably works too. You might need to add align-items:start To the notes grid (and maybe others too) to make sure things isnide the grid dont take p more space than they need. If you want to align things so stats spreads across noes and derived, that is a lot more complicated, and you asked for a simple solution :)

That was a pretty simple solution! Didn't occur to me to give some of the grids a parent grid and reference that in the template area. I'm satisfied with the new look. Your comment has me curious as to what would be needed to align things in such a way that the stats section would be across the notes and derived sections. You would need to do that in order to get rid of the excess white space this new layout has at the bottom of the derived section, right?

I think that's pretty simple here. Just replace part of your CSS with this: .sheet-character-grid {   display: grid;   grid-template-columns: 72% 28%;   grid-template-areas: "info  notes " "vals  notes " "stats notes " "stats derive"; And leave the HTML as it was originally. I didn't notice the layout had notes crossing all the left grid boxes in the first post. Try this out.