Breaking the CSS Grid

Hi,
I’m trying to create a kind of “Masonry grid” like in the screenshot below, now I know that CSS Grid works with content that has the same width and height. (Also bigger content, but still in the same columns (Screenshot 2)), is it possible to create the grid of Screenshot 1 without code, because it would be used in the whole site?

Screenshot 1:

Screenshot 2:
5cddb842b0229dfd72f297f3_fSSFsRvGQAR6UusE64PUbJAybHugGOHWzNqw_Jfv0av-uvo_pqvMtuRQ9iDyxOhzodJZjo0r4XaqGq4yPlGywgWYjre5Pb5yuX1Mkqpc3WdLFXuFZOlaepW8UyA3n3X9Yt53q01m

Many thanks from the beginning,
N. Arnaudov

Using grids and overlapping div blocks you can create something like this without coding.


I will have to try it out, thanks. I am using an 8-column grid, so I think I will just create a ton of 500px rows and span the content then, thank you again.