Draw Chess Board using CSS Grid

CSS grid is pretty great to build layout for the web and is supported in almost any browser at the present. We can take its advantage to draw a chess board in a very simple way.

In a CSS grid, there is a parent, which is a grid, and children, which are elements to arrange inside the grid. So to draw the chess board, we will start with a simple grid container.

<section id="container">
</section>

Here the styling:

#container {
    margin: 0 auto;
    width: 640px;
    height: 640px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

To make it become a grid, display: grid; is necessary. The next line grid-template-columns indicates the template of children inside the grid, which is defined by repeat(8, 1fr). To explain in few words, it means, to layout 8 columns inside grid with equal width. The repeat function is a shortcut for: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr.

Since I don’t want to statically add black and white cells, I add them via Javascript on page initialization, which is more handy.

(function () {
    var _cellBlack = '<div class="black"></div>',
        _cellWhite = '<div class="white"></div>';
    var MAX_CELL = 8;

    var _gridContainer = document.querySelector('#container');
    for(var i = 0; i < MAX_CELL; i++) {
        for(var j = 0; j < MAX_CELL; j++) {
            if((i + j) % 2 == 0) {
                _gridContainer.insertAdjacentHTML('beforeend', _cellBlack);
            } else {
                _gridContainer.insertAdjacentHTML('beforeend', _cellWhite);
            }
        }
    }
})();

Nothing special about that.
That’s basically done for the chess board. As you can see, by using CSS grid layout, the design will be faster and simpler.

You can check if CSS grid is widely supported in browsers https://caniuse.com/#feat=css-grid

As you can see at the support chart, the feature is ready, so you don’t have to worry about it from now on.

You can check out sample source code at https://github.com/petehouston/css-grid-chessboard

Similarly, you can use this technique to draw a tik-tak-toe board, reference the code at https://github.com/petehouston/css-grid-tiktaktoe-board