CODEWITHSUNDEEP
htmlcsscss-grid
Dhawal Mhatre
Dhawal Mhatre

Reputation: 19

Auto Adjusted Row & Column Grid in HTML CSS

I have the below design to be created dynamically enter image description here I have this layout & wanted to convert this using HTML CSS. My requirement is that, when any column is deleted another column should increase the space in place of a deleted column.

Also, the same is needed when someone removes any row, the previous row should take place of that row.

Upvotes: 1

Views: 52

Answers (1)

Maik Lowrey
Maik Lowrey

Reputation: 17556

To build the grid: You can archive this by using a loop inside a loop. For Styling i use flex box system.

const c = document.querySelector('div');

for (let i = 0; i < 4; i++) {
  const row = document.createElement('div');
  row.setAttribute('class','row')   
  for (let j = 0; j < 4; j++) {
    const cell = document.createElement('div');
    cell.setAttribute('class','cell')    
    cell.innerHTML = i + ' - ' +j
    row.append(cell);
  }
  c.append(row)
}
.container {
  background: yellow;   
  height:100vh;
}
.row {
  display: flex;  
}

.cell {
  border: 1px solid black;
  padding: 5px;
  width:25%;    
  height: 25vh;
}
<div class="container"></div>

Upvotes: 1

Related Questions