English alphabet with CSS grid using different methods

Bit late to the party, but just wanted to share this little exercise I did to practice CSS grid. Might be a bit useful as reference or project idea for anyone still learning it. CSS got a bit trippy from P onward with grid-template-areas basically drawing the letters.

I used grid-row-start, grid-row-end, grid-row (and the column equivalent), grid-area, before eventually settling on grid-template-areas. I didn’t justify/align since it wasn’t really applicable here.

Disclaimer: Totally not what CSS Grid is for.

1 Like