Create a chessboard using CSS Grid

It is fairly easy to create a Chessboard using just CSS Grid. With a CSS grid, you can create a grid-based layout pretty much like an actual chess board.

In this article, we would use only HTML and CSS to create a chessboard.

Step1: Define the grid container.

Here, we have set the width of the container to be 800px.
We have enabled the grid display using display: grid;

.container {
      width: 800px;
      display: grid;
    }

Step2: Define rows and columns using fr- fractional ratios

Here, we have defined 8 columns and 8 rows, each equal to 1 fr.

.container {
      width: 800px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

Step3: Define classes for alternating boxes.

Now, we can define the height and width of each box.
As the container width was 800px, we can create each box of 800/8=100px each.
Note that the chessboard grid is 8x8.

.white {
      height: 100px;
      width: 100px;
      background-color: black;
    }

.black {
      height: 100px;
      width: 100px;
      background-color: white;
    }

Here is the complete code:

Wrapping up

I hope you found this tutorial helpful. Thank you for reading till the end.

I would love to connect with you on any of these platforms.