TLDR Web Dev · ARTICLES & TUTORIALS
PRINTING MUSIC WITH CSS GRID
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.