Remove white space below rows in grid

Question

I am trying to create a grid using Javascript. I have it created so that the rows are properly aligned within the container, however there is a 4px whitespace being added underneath every row that I need to get rid of so that there is no whitespace within the grid. Here's my code:

function grid(num) {
  var container = document.createElement("div");
  container.id = "main";
  container.className = "container";
  document.body.appendChild(container);
  var main = document.getElementById('main');
  for (var i = 1; i <= num; i++) {
    var row = document.createElement('div');
    row.className = "row";
    row.id = "row" + i;
    main.appendChild(row);
    var currentRow = document.getElementById('row' + i);
    for (var r = 1; r <= num; r++) {
      var box = document.createElement('div');
      box.className = 'box';
      box.style.height = ((800 - (num * 2)) / num) + 'px';
      box.style.width = ((800 - (num * 2)) / num) + 'px';
      currentRow.appendChild(box);
    }
  }
}

window.onload = grid(16);

.container {
  border: solid #000;
  height: 800px;
  width: 800px;
}

.box {
  border: 1px solid #000;
  display: inline-block;
}

yunzen · Answer 1 · 2021-03-18T13:48:46.163

How about adding vertical-align: bottom to .box?

Why does this work? The default vertical-align value is baseline. This sets the baseline of each element to be on the same height. The baseline of the .box elements are just the bottom-most edge of the border. But the surrounding context is a text line. The baseline of a text line is above the bottom of the text line.

function grid(num) {
  var container = document.createElement("div");
  container.id = "main";
  container.className = "container";
  document.body.appendChild(container);
  // var main = document.getElementById('main');
  for (var i = 1; i <= num; i++) {
    var row = document.createElement('div');
    row.className = "row";
    row.id = "row" + i;
    main.appendChild(row);
    //container.appendChild(row);
    //var currentRow = document.getElementById('row' + i);
    for (var r = 1; r <= num; r++) {
      var box = document.createElement('div');
      box.className = 'box';
      box.style.height = ((800 - (num * 2)) / num) + 'px';
      box.style.width = ((800 - (num * 2)) / num) + 'px';
      row.appendChild(box);
      //currentRow.appendChild(box);
    }
  }
}

window.onload = grid(16);

.container {
  border: solid #000;
  height: 800px;
  width: 800px;
}

.box {
  border: 1px solid #000;
  display: inline-block;
  vertical-align: bottom;
}

BTW. I commented out some lines you don't need.

score 0 · Accepted Answer · edited Mar 18 '21 at 14:04

That is a typical problem ... with inline-elements.

The .box elements are set to .inline-block. That causes the typical white space below. There are different methods to remove it. Just two:

Most popular is to set font-size: 0 and line-height: 0 to parent container. Than you have to reset up the values to .box itself.
Another method is to work with negative margins to .boxes and set margin-bottom: -4pxto them.

Example based on font-size:

function grid(num) {
  var container = document.createElement("div");
  container.id = "main";
  container.className = "container";
  document.body.appendChild(container);
  var main = document.getElementById('main');
  for (var i = 1; i <= num; i++) {
    var row = document.createElement('div');
    row.className = "row";
    row.id = "row" + i;
    main.appendChild(row);
    var currentRow = document.getElementById('row' + i);
    for (var r = 1; r <= num; r++) {
      var box = document.createElement('div');
      box.className = 'box';
      box.style.height = ((800 - (num * 2)) / num) + 'px';
      box.style.width = ((800 - (num * 2)) / num) + 'px';
      currentRow.appendChild(box);
    }
  }
}

window.onload = grid(16);

.container {
  border: solid #000;
  height: 800px;
  width: 800px;
}

.box {
  border: 1px solid #000;
  display: inline-block;
  font-size: 1rem;
  line-height: calc(1rem + 2px);
}

.row {
  font-size: 0;
  line-height: 0;
}

Roko C. Buljan · Answer 3 · 2021-03-18T14:22:02.927

.append() after! Not before (works also with inline-block since it will eat-up the spaces)
Anyways you'd better go by simply using display: flex; on the .container and .row with flex: 1 on the .row and .box - so you don't need to calculate anything (height/width)
PS: Don't create an element and than go search the DOM for it, you already have it in that variable name!
You JS can be simplified by using a nice helper function to create your Elements:

const ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr||{});

function grid(num) {
  const main = ELNew("div", {className:"container"});
  for (let r = 1; r <= num; r++) {
    const row = ELNew("div", {className:"row"});
    for (let c = 1; c <= num; c++) {
      const box = ELNew("div", {className:"box", onclick: ()=> console.log(`Row: ${r} Cell: ${c}`)});
      row.append(box);
    }
    main.append(row);
  }
  document.body.append(main);
}

window.onload = grid(10);

* {margin: 0; box-sizing: border-box;}

.container {
  height: 200px;
  width: 200px;
  display: flex;
  flex-flow: column nowrap;
}

.row {
  display: flex;
  flex-flow: row nowrap;
  flex: 1;
}

.box {
  border: 1px solid #000;
  flex: 1;
  cursor: pointer; 
}

Click a cell!

Remove white space below rows in grid

3 Answers3