CSS Grid Grouping into columns

I keep forgetting this, so time to blog it. It does not work on Firefox due to limited subgrid support.

The Goal is a large grid if items which are grouped in 3 rows at a time, and wrapping after 3 columns.

1 4 7
2 5 8
3 6 9
10 13 16
11 14 17
12 15 18

.parent
{
	width: 95%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3,calc(calc(100% - 3vw) / 4));
grid-template-rows: repeat(3, auto);
	grid-auto-rows: max-content;
	align-items: start;
	grid-gap: 1vw;
}

.child
{
	display: grid;
	row-gap:0;
	grid-row: auto / span 3 ;
	grid-template-columns: 100%;
	grid-template-rows: subgrid;
}