flexGriddle

by Asif Sharif Shahid

HTML

<div id="mainContainer">

</div>
Board Size: <input type="number" id='boardsize' value="3" />

CSS

#mainContainer{
  width: 400px;
  height:400px;
  border: solid 1px blue;
  display:flex;
  flex-direction:column;
}

.row{
  width:100%;
  display:flex;
  flex-direction: row;
}

.cell{
	position: relative;
	width: 100%;		/* desired width */
}

.cell:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
  border: solid 1px red;
}

.cell-content{
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  display:flex;
  justify-content:center;
  align-items:center;
}

JavaScript

$(() => {
	let boardSize = parseInt($("#boardsize").val());
  drawBoard();

	$("#boardsize").on("change", (event) =>{
  	boardSize = parseInt(event.target.value);
    drawBoard();
  });
  
  function drawBoard() {
  	console.log(boardSize);
    $("#mainContainer").empty();
    
    for(i = 0; i < boardSize; i++){
    	let row = $("<div>", {class:"row"}).appendTo($("#mainContainer"));
      
      for(j = 0; j < boardSize; j++){
        let cell = $("<div>", {class:"cell"}).appendTo(row);
        
        let cellContent = $("<div>", {class:"cell-content", text:i+":"+j}).appendTo(cell);
      }
    }
  }
});