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.