Hey @GRD very cool site.
I have a solution that I am not positive you are looking for… but it will work.
You are trying to add padding around your images by using the grid columns and rows. I would personally avoid doing this as it will become quite cumbersome when you are trying to work on responsiveness.
Instead, I would recommend 3 rows and 3 columns and remove all px gap. This will help a lot with responsiveness.
Secondly, I would add ‘related’ content together in a div…
Green Lines = Columns/Rows
Red Boxes = Div
Numbers = Div number
The reason I’d do the divs, is because you can then add the padding as a %. This will also help with responsiveness. You can add additional padding/margins directly on your text if needed.
Now for positioning. Select your div and place them manually into the grid. You can then get them space properly.
Div 1 = Row 1 - Row 1 & Col 1- Col 2
Div 2 = Row 1 - Row 2 & Col 3 to Col 3
Div 3 = Row 2 - Row 3 & Col 1 - Col 1
Div 4 = Row 3 - Row 3 & Col 2 - Col 3
Final note: Make the grid into %'s instead of FR. This will help you with what you are doing. FR will vary depending how many columns/rows you add.
Column 1 = 40%
Column 2 = 20%
Column 3 = 40%
Sorry, I know the image is a little messy and hard to follow, let me know if you need additional clarification.
Hope this helps