The HTML in this demo is using the Svelte templating system to generate a bunch of fake dates. This makes it easier for you to see the essential HTML, but might confuse you if you don't know the syntax.

This CSS demo uses the grid system to create a 7 column grid, but auto rows. You then just write each date as a tag and the grid does the rest for you. You should also notice how I did the month display on the top:

calendar month {
  grid-column: span 7;
}

When you're dealing with a regular grid like this it's easier to use numeric indexes, but I think for more complex layouts it's better to use the method in GridOverGraphic where you name the grid cells instead of using numbers.