TLDR Web Dev · ARTICLES & TUTORIALS

PRINTING MUSIC WITH CSS GRID

cruncher.ch10 min read

Summary from the TLDR Web Dev newsletter

This article describes a new way to show music notation responsively on the web using CSS Grid. The system defines musical staves as grids, allowing notes to be positioned by pitch (on the y-axis) and time (on the x-axis). This approach is responsive, allows for easy swapping of clefs and time signatures, and makes sure elements like chords and lyrics are aligned properly.