However I seem to have an issue getting the text or image I want to use to span over multiple columns/rows. I tried following this guide with no success:
Does anyone maybe know how to achieve something like this from within BSS? I know I can do this with negative margins but that is not really ideal for a responsive design. Using grid-column: 1 / span 2; also did not work
The main thing to understand is that you won't be using flexbox, so you won't be using the ROW/COLUMNS.
Flexbox uses the CSS property "display:flex"
CSS Grid uses the CSS property "display:grid"
So to do what the examples you gave do, you will have to manually built the HTML and CSS.
I have not personally used the grid items overlapping each other, but I can understand the logic in how it's done.
Start simple to understand how CSS Grid works then once you get that you figure out how the overlapping works.
Good site to start with on getting to understand CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/
This is a basic concept, I used parts of the above sites image and made a test grid with overlapping that you can try out. I'll get around to making a jsfiddle of it.