📝 Problem Statement

Create an 8x8 chessboard layout using HTML and CSS only. The board should alternate between black and white squares like a real chessboard. You are required to use semantic HTML structure and clean CSS to achieve the layout.

📌 Requirements

  • The chessboard must have 8 rows and 8 columns, forming a grid of 64 squares.
  • Squares must alternate between black and white colors (starting with white in the top-left corner).
  • Each square should be equal in size (e.g., 60x60px).
  • The board should be centered on the page.
  • Use only HTML and CSS – no JavaScript allowed.

🚫 Constraints

  • Do not use background images.
  • Do not use JavaScript.
  • Do not use inline styles or third-party libraries.
Hint 1

Use CSS Grid for layout.

Hint 2


Use :nth-child() selector in CSS to alternate colors (Not mandotory)