Space between rows in a grid

Question

I am trying to create a 16x16 grid. Everything works perfectly except that I have some space between my rows, I can't figure out why. The spacing between the columns is perfect but the rows have some gap between them.

Here's my code:

const container = document.getElementById("drawingGrid");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");

function createGrid() {
  makeRows(16);
  makeColumns(16);
}

// create rows
function makeRows(rowNum) {
  for (r = 0; r < rowNum; r++) {
    let row = document.createElement("div");
    container.appendChild(row).className = "gridRow";
  }
}
// create columns
function makeColumns(cellNum) {
  for (i = 0; i < rows.length; i++) {
    for (j = 0; j < cellNum; j++) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    }
  }
}

createGrid();

.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 10px;
  display: inline-block;
  margin: 0;
  padding: 0;
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>EtchASketch</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div id="drawingGrid">
  </div>

  <script src="app.js"></script>
</body>

</html>

And here's what it looks like on chrome:

@m4n0 's answer is better than anything I was looking at-- as to _why_ the gap is there, that's a bit more mysterious. — Alexander Nied, Apr 14 '21 at 15:32
The gap is the so called: `inline decender space`. space for letters like y, j, g, p that requires space below the normal base-line. — tacoshy, Apr 14 '21 at 15:41
[Duplicate](https://google.com/search?q=site%3Astackoverflow.com+css+vertical+gap+between+inline-block+elements) of [Vertical space between two inline-block and a block element](https://stackoverflow.com/q/38520001/4642212). — Sebastian Simon, Apr 14 '21 at 15:49

m4n0 · Answer 1 · 2021-04-14T15:46:13.420

You can turn the gridRow into a flexbox container. You can read the reason behind the space: Why does my image have space underneath? here.

const container = document.getElementById("drawingGrid");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");

function createGrid() {
  makeRows(16);
  makeColumns(16);
}

// create rows
function makeRows(rowNum) {
  for (r = 0; r < rowNum; r++) {
    let row = document.createElement("div");
    container.appendChild(row).className = "gridRow";
  }
}
// create columns
function makeColumns(cellNum) {
  for (i = 0; i < rows.length; i++) {
    for (j = 0; j < cellNum; j++) {
      let newCell = document.createElement("div");
      rows[j].appendChild(newCell).className = "cell";
    }
  }
}

createGrid();

.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 10px;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.gridRow {
  display: flex;
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>EtchASketch</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div id="drawingGrid">
  </div>

  <script src="app.js"></script>
</body>

</html>

Francesco Lisandro · Accepted Answer · 2021-04-14T15:41:20.810

2

You should define the height of your row:

.gridRow{
  max-height:10px;
}

or setting the line-height of your row:

.gridRow{
  line-height:10px;
}

or using flexbox as defined by m4n0.

edited Apr 14 '21 at 15:41

answered Apr 14 '21 at 15:32

Francesco Lisandro

700
4
14

1

Thanks, that works perfectly! – Gobhniu Apr 14 '21 at 15:52

Space between rows in a grid

2 Answers2