Lav to kolonner af ens bredde og to rækker af auto. Lav derefter .box til en grid-container, og lad den arve række-definitionerne fra .container ved at anvende grid-template-rows: subgrid.

Lad hver boks (.box) spænde over begge rækker vha. grid-row.

OBS! Fordi vi implicit indstiller to rækker i .box vha. grid-row, kan du fjerne grid-template-rows fra .container og stadig få samme resultat.

Lav fire kolonner, der veksler mellem størrelserne auto og 1fr vha. repeat(2, auto 1fr), og sørg for et mellemrum på 1rem.

.box-1 skal strække sig over begge rækker og .box-5 skal strække sig fra den anden kolonne til den allersidste. .box-5 skal arve kolonnerne fra .container vha. subgrid.

Sørg for at .box-5 arver mellemrummet (gap) fra .container ved at anvende gap: inherit.

Lav et grid med fire kolonner, hver med en bredde på 1fr. Sæt også et gap på 1rem.

Både .box-2 og .box-2b skal strække sig fra den anden kolonne til den sidste kolonne og placeres på række to. Begge skal arve gap fra .container ved hjælp af gap: inherit og skal indstilles som grid-containere, der arver kolonnerne fra .container ved hjælp af subgrid.

Lav .box til en grid-container med to kolonner (auto 1fr). Mellem kolonnerne skal der være et mellemrum på 1rem.

Alle .child-elementer skal strække sig fra første til sidste kolonne. .child-elementerne skal også indstilles som grid-containere og arve kolonnerne fra .box vha. subgrid.

.box-1 og .box-2b er placeret på kolonnelinje nummer 3 i hovedgrid’et. Tællemåden i subgrid’et er asynkron med hovedgrid’et, fordi .box-2b’s parent spænder fra kolonnelinje 2 / -1. For at omgå dette og skabe en ensartet reference, kan vi navngive linjerne. Dette gøres ved at sætte navnet i kantede parenteser, f.eks. [a] 1fr [b] 1fr, i grid-template-columns-definitionen (første linje har nu navnet a osv.).

Navngiv kolonnelinjerne [a], [b], [c], [d], [e] og ændr værdien af grid-column for både .box-1 og .box-2b til c.