How to create a chess board without gaps between the rows?

Question

I am trying to create a chess board.I am using nested loops to do that. The problem is that there is a gap between two horizontal rows of the block. Below I have create a snippet for 3x3 board.

const board = document.querySelector('#board');
const colors = ["black","gray"]
function start(){
    for(let i = 0;i<3;i++){
        let br = document.createElement('br')
        for(let j = 0;j<3;j++){
            let block = document.createElement('div');
            block.classList.add('block');
            let id = (i * 8) + j
            block.id = id;
            block.style.backgroundColor = colors[(id+i) % 2]
            board.appendChild(block)
        }
        board.appendChild(br)

    }
}
start()

.block{
    height: 70px;
    width: 70px;
    display:inline-block;
}

<div id="board"></div>

I already head about solution using float:left instead of display:inline-block. How could I remove the gap?

I would also like to see if there is better code for creating chessboard?

all the answer aren't giving the simple solution which is to use `vertical-align: top;` on the inline-block (baseline alignment is the issue) — Temani Afif, May 07 '19 at 09:26
@TemaniAfif This is the same solution a used along ago. I just forgot about that. Thanks for telling telling. — Maheer Ali, May 08 '19 at 03:22

score 3 · Accepted Answer · answered May 07 '19 at 02:46

3

The gap is there because the <br>. #board { font-size: 0; } will remove it.

answered May 07 '19 at 02:46

azeós

4,853
4
21
40

it's not because of the br tag, it's because of the vertical alignment (remove the br tag and use max-width instead, you will have the same issue – Temani Afif May 07 '19 at 09:27

score 3 · Answer 2 · answered May 07 '19 at 02:53

You seem to be trying to create a table with divs. It's perfectly fine, apart from the fact that you'll need to manage spaces between the blocks with margins, if you ever need them.

You could create a table and use border-collapse: collapse

const board = document.querySelector('#board');
const colors = ["black", "gray"]

function start() {
  for (let i = 0; i < 3; i++) {
    let tr = document.createElement('tr')
    for (let j = 0; j < 3; j++) {
      let block = document.createElement('td');
      block.classList.add('block');
      let id = (i * 8) + j
      block.id = id;
      block.style.backgroundColor = colors[(id + i) % 2]
      tr.appendChild(block)
    }
    board.appendChild(tr)

  }
}
start()

.block {
  height: 70px;
  width: 70px;
}

#board {
  border-collapse: collapse;
}

<table id="board"></table>

Kamil Kiełczewski · Answer 3 · 2019-05-07T03:18:32.600

3

try to use flex

function start(n){
    let s='';
    for(let i = 0;i<n;i++){
        s+='<div class="row">'
        for(let j = 0;j<n;j++){
            s+=`<div class="block ${(i+j)%2?'white':''}"></div>`
        }
        s+='</div>'
    }
    board.innerHTML=s;
}

start(3)

.block{ height: 70px; width: 70px; background: black }
.white { background: gray }
.row { display: flex }

<input type="range" min="1" max="8" oninput="start(this.value)" value=3 /><br>

<div id="board"></div>

edited May 07 '19 at 03:18

answered May 07 '19 at 03:01

Kamil Kiełczewski

85,173
29
368
345

Thanks for useful tips +1. But the first solution is best for me because I don't know much about flex. – Maheer Ali May 07 '19 at 03:41
No problem :) however I think it is good moment/occasion to learn [flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – Kamil Kiełczewski May 07 '19 at 03:45

score 0 · Answer 4 · answered May 07 '19 at 02:53

I'd recommend using canvas. You can fill the screen with rectangles, each with sidelength width ,and starting position (i*width,j*width). Each rect can be filled with a colour, by specifying the fill colour before drawing. Look into a good HTML Canvas tutorial.

How to create a chess board without gaps between the rows?

4 Answers4