Solution 1 :

I copy + pasted the code in your question to create a jsfiddle:

What you’ve created so far is a fixed size .grid, where the number and size of the inner div.cell vary depending on the user input.
Understanding your question correctly, this is not what you want. The div.cell should always stay 12.5×12.5 (that’s what I see onload of the fiddle).
If that’s the case, just change this line:
let gridWidth = 200 / value;
let gridWidth = 12.5;
And now the .grid sizes depending on the number of cells in it.

Solution in according to comments below: remove the gap style from .grid and add a border to .cell: .cell{border:1px solid #FFFFFF;}. Please see:

Solution 2 :

You cloud use this:

// Container for columns
.h-container {
  display: flex;
  flex-flow: column;
  height: 100%;

// Container for rows
.w-container {
  display: flex;
  flex-flow: row;
  height: 100%;

.container-needed {
  flex: 0 1 auto;

.container-rest {
  flex: 1 1 auto;
  overflow: hidden;


<div class="w-container">

  <div class="container-needed"> </div>

  <div class=container-rest> </div>


with this, the first elements takes as much as it needs and the second the rest, you could add more then two if you want…
the container could be a fixed size

Problem :

I am creating etch-a-sketch. Currently, i figured out how to create a grid width user input values. But when the values changes the grid size changes. I want to make the width of the grid stays same whenever cell value changes. What should i do for that. I tried adjusting grid template rows and columns. It didn’t work

Thank you

Here’s my code

    padding: 10px;
    display: inline-grid;
    justify-content: center;
    border: 1px solid black;
    gap: 1px;

    padding: 10px;
    display: flex;
    justify-content: center;
const container = document.getElementById('container');

//div for buttons
const buttonDiv = document.createElement('div');

//A button to reset Everything
const resetButton = document.createElement('button');
resetButton.textContent = 'Reset';

//grid in a seperate div
const grid = document.createElement('div');

//function to create grid
function makeGrid(value){
    let gridWidth = 200 / value; = `repeat(${value}, ${gridWidth}px)`; = `repeat(${value}, ${gridWidth}px)`;
    for(let i = 0; i < value; i++){
        for(let j = 0; j < value; j++){
        const cell = document.createElement('div');
        cell.addEventListener('mouseover', toBlack);

//to change the cell color to black on mouseover
function toBlack(e){ = 'black';

function resetGrid(){
    const value = prompt('Input a number of Squares');
    grid.innerHTML = '';


window.onload = () => {makeGrid(16)};


Comment posted by ancxanas

I think i might have asked the wrong question. I want to make the width of the grid stays same whenever i cell value changes. What should i do for that.

Comment posted by Piemol

@ancxanas what do you define as ‘the grid’ then? The

Comment posted by ancxanas

I am talking about

Comment posted by

@ancxanas okay, I see now what you mean I think. With larger number of cells, the ‘200px’ is not always dividable without rounding issues. If you leave out the gap on the .grid and replace it with a border on the cells, the

Comment posted by Piemol

@ancxanas okay I’ve added it to my answer, if it really solved your question, please accept the answer itself. Thank you!