Chess board css

Asked

Viewed 235 times

0

I’m having trouble putting together a chessboard, I left 4x4 just for the sake of aesthetics, someone could help me with the resolution of this?

	casas = 4

	for(i=0;i<casas;i++){
		for(j=0;j<casas;j++){
			tabuleiro.innerHTML += "<div></div>"
		}
	}
	#tabuleiro{
		width: 400px;
	}
	#tabuleiro div{
		background-color: red;
		width: 100px;
		height: 100px;
		float: left;		
	}
	#tabuleiro div:nth-child(2n){
		background-color: #b58763
	}

	#tabuleiro div:nth-child(2n+1){
		background-color: #f0dab5
	}
<div id='tabuleiro'></div>

css

  • What is the question exactly? At what point are you having difficulty?

  • CSS-only answers: https://answall.com/questions/319900/como-fazer-com-css-um-fundo-checker_tabular

2 answers

2

I did a validation and class marking for odd lines and pairs:

casas = 4

for (i = 0; i < casas; i++) {
  for (j = 0; j < casas; j++) {
    if(i%2==0){
      tabuleiro.innerHTML += "<div class='linha-par'></div>"
    }else{
      tabuleiro.innerHTML += "<div class='linha-impar'></div>"
    }
    
  }
}
#tabuleiro {
  width: 400px;
}

#tabuleiro div {
  background-color: red;
  width: 100px;
  height: 100px;
  float: left;
}

#tabuleiro div.linha-par:nth-child(2n) {
  background-color: #b58763
}

#tabuleiro div.linha-par:nth-child(2n+1) {
  background-color: #f0dab5
}

#tabuleiro div.linha-impar:nth-child(2n) {
  background-color: #f0dab5
}

#tabuleiro div.linha-impar:nth-child(2n+1) {
  background-color: #b58763
}
<div id='tabuleiro'></div>

0


casas = 4

for(i=0;i<casas;i++){
  for(j=0;j<casas;j++){
    if(i%2 ==0){
      if(j%2 == 0){
        tabuleiro.innerHTML += "<div class='black'></div>"
      }else{
        tabuleiro.innerHTML += "<div></div>"
      }
    }else{
      if(j%2 == 0){
        tabuleiro.innerHTML += "<div></div>"
      }else{
        tabuleiro.innerHTML += "<div class='black'></div>"
      }
    }
  }
}
#tabuleiro{
  width: 400px;
}
#tabuleiro div{
  background-color: #f0dab5;
  width: 100px;
  height: 100px;
  float: left;		
}
#tabuleiro div.black{
  background-color: #b58763
}
<div id='tabuleiro'></div>

I made a much simpler solution, I used the matrix you created using both for i and j, take a look!

https://codepen.io/caioalexandrebr/pen/vvPZor

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.