Problem description

Given a div.calendar container with child div elements representing days of the week (Sun–Sat) and date cells (div.date), implement a CSS Grid that:

1. Uses grid-template-columns: repeat(7, 1fr) for weekday columns.

2. Places weekday headers in the first row.

3. Offsets date cells so that the first date appears under its corresponding weekday column using CSS only (e.g., :first-child { grid-column-start: X; }).

4. Wraps remaining dates into subsequent rows.

5. Remains fully responsive: cells shrink and expand as viewport width changes.

Goal

Write CSS in styles.css to configure the calendar grid, including header and date positioning, responsive cell sizing, and consistent gutters.

Constraints

• Use CSS Grid exclusively.

• No JavaScript is allowed.

• Use grid-column-start for the first date offset.

• Weekday headers and date cells share a gap of 5px.

• Cells should maintain a square aspect ratio.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.