1
Items 1 and 2 are in the same row. Items 1, 6, and half of 4 are in the same column.
Item 1 appears behind 3 because of the translateX(-90px)
set on it.
2
3
Items 3–5 are in the same row and each spans two columns.
(Note: I didn’t focus on making this layout fully responsive, so it fails in narrow viewports. You could stack the boxes by default, and then apply the Grid layout at a breakpoint that’s wide enough to accommodate it.)
4
As is typical with Grid, the row below will push down or move up in accordance with the length of content in this row. So if I were to add more content to items 3, 4, or 5, the layout wouldn't break. This is one key difference between doing a layout like this with Grid and positioning the items absolutely.
5
6
7
Items 6 and 7 are in the same row. Item 7 is in the same column as 2 and half of 4.