Working on a redesign of our site and trying to do things with grid as much as possible.

Using the Cards section from the kit-kat theme, is it possible to include addition information between the cards and the footer without the large amount of space appearing?

Please post your project file, so that we can see how you have made that page. We need to see how that empty space is made to be able to tell you how to fill it.

sorry, grabbed wrong file

I'm not very much into grid, but the culprit here is clearly the grid parent. You need to set some height limitation, otherwise it will stretch and stretch ad infinitum more or less. I tried the height 100vh which brought the footer up quite close to those two headings with links below them. You may not agree with that, especially if you want to add more contents, so you need to play with the height and see what is best.

On the main container (class grid-parent), the Grid Editor shows 5 rows. Rows 3 and 4 are set to 1fr. If at 'No Breakpoint - All Widths' one sets Rows 3 and 4 to 'auto', the gap disappears.

Frank

Oh, so that is the way to solve it in grid. I didn't know, I said I'm not much into it yet. I'll get there some day...

I fear I'm also by no means there, and not getting much practice at it either for the following reason. The Fallback First style etc. settings precede the Grid Layout settings in the main.css file, and browsers which don't read CSS Grid Layout settings need to be catered for.

I very quickly discovered (happily offline) that for me it was therefore important first to cater for Fallback First. Doing it the other way (CSS Grid Layout first) resulted in doing all sorts of styling within Grid Layout, and later having to repeat much of it in Fallback First because the non-Grid-Layout browsers of course ignore the stylings done within Grid Layout.

Stylings done in Fallback First are read by the browsers which do take note of Grid Layout, and one doesn't have to repeat those set for Fallback First. For Grid Layout one therefore needs to include only the stylings one wishes to change for Grid-Layout browsers.

Frank

Isn't that's why it's called fallback first?

That would make sense, but one might not reach that conclusion from some of the guidance given.

(a) This part of the Guide says, "Simply select the Fallback First mode to set your basic styles. Then switch to the other mode and design away for modern browsers. And...it will also work the other way around — create an awesome Grid Layout first, then define styles for non-supporting browsers." That last sentence implies it doesn't matter in which order one does it, not mentioning the problem created by the second method.

(b) Bob's tutorial here at item 1 under the heading 'Convert to CSS Grid—section by section' says, "Start with removing all the layout related classes in your HTML. New classes can be assigned if needed." It's possible that many, like me, would have layout and styling mixed together in a class. and I think in those circumstances it's best to use the Apply Styles > Reset facility to remove just any layout matters from such classes.

There is nothing incorrect in the above guidance, but neither is there anything there making clear the problems of not starting with Fallback First. Unless I've misunderstood the situaton, I think it would be useful for the Guide and other instructions to urge users that, if they're going to use Fallback First at all, they should use it first. Happily Bob does advise something like that workflow here, but doesn't seem there to consider that workflow for layout on wider screens in non-CSS-Grid browsers.

I think the background problem is one that occurs because guidance can sometimes overlook how ignorant I, the reader, am.

Frank

Please let Bob read this. You have to approach him directly, then he doesn't come over here too often.
You are definitely not the only ignorant reader here (raising a hand).