Printing music with CSS Grid
Rhythm is perhaps a little trickier to handle. There is not one immediately obvious smallest rhythmic division to adopt that will support all kinds of rhythms. A judgement call must be made about what minimum note lengths and what cross-rhythms to support inside a grid. A 24-column-per-beat approach supports beat divisions to evenly lay out eighth notes (12 columns), sixteenth notes (6 columns) 32nd notes (3 columns) as well as triplet values of those notes. It’s a good starting point.
Published 8 May 2024, with 82 words.