CSS grid har allerede begynt å bli almennkjent så jeg kommer ikke til å skrive så mye om det i dag, men det er et scenario som grids ikke har løst så bra hittil.

Eksempelvis la oss si vi bruker grids til å lage en artikkelvisning med tre artikler ved siden av hverandre. Grids løser dette problemfritt. Men! Så har hver artikkel et bilde, tittel og noe brødtekst, og gitt at bildene og tekstene er av forskjellige lengder så vil ingen av elementene inni article elementene være stilt side om side på tvers av artikler. Det kan man se i dette eksempelet.

Man kunne satt display: grid på artiklene også, men da starter man bare en ny grid, og hver artikkel kommer til å være sin egen nye grid og ingen av gridene vil vite om hverandre, så vi er like langt som før.

Med subgrid kan man nå definere slike undergrids til å være en del av den større forelder-griden. Man kan definere subgrid på enten grid-template-columns, grid-template-rows eller begge.

I dette eksempelet kan vi se at bildene og tekstene nå er stilt ved siden av hverandre til tross for forskjellige bredder og høyder. Merk at jeg måtte definere artiklene til å strekke seg over 3 rader med grid-row: 1 / 4 slik at subgridene også får disse.

Denne regelen har vært godt støttet i over ett år nå, så bruk i vei!