How can I build a 12 by 12 grid using javascript?

Question

For clarity I am using svelte, I was using css grid layout before in the following manner:

#global_grid{
        display: grid;
        grid-template-columns: repeat(12, calc(100vw / 12));
        grid-template-rows: repeat(12, calc(100vh / 12));
    }

The problem I am having is that the grid is larger than the browser innerheight as I am using 100vh. I do not know how to fix the issue I am having, a thought would be to do window.outerheight - window.innerheight to get the difference in pixels, and subtract that amount inside grid-template-rows: repeat(12, calc(100vh / 12));. I would also just be able to do the innerheight/12 I imagine.

To clarify one more time, I am using svelte and would like to breakup the page into 12 by 12 grid. Using just css leaves extra space at the bottom, my best guess is it's the extra height as a result of the browser header. I would prefer to solve using css, any help greatly appreciated!

Answer 1

Is this what you're looking to do?

First, make sure you set 100% for the height and width of both the html and body elements, as they do not have a default size.

Next, set the 100vh and 100vw values on the container element that has your header and grid. Give it a flex display with column direction, which will set a vertical flow.

To make your grid element only take up the remaining viewport space after your header's height, give a flex: 1 value to your grid element. Also, use 100% in your calc functions, since you already set its container to cover the full viewport window and you don't want to overcount the header element. If you want borders or a gap on your grid, make sure to calculate the offset that each gap in your template will contribute.

Here is the code:

const globalGrid = document.getElementById("global-grid");

for (let i = 0; i < 12; i++) {
  for (let j = 0; j < 12; j++) {
    const node = document.createElement("div");
    node.classList.add('grid-cell');
    globalGrid.appendChild(node);
  }
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100v;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2em;
}

#global-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, calc((100% - 12px) / 12));
  grid-template-rows: repeat(12, calc((100% - 12px) / 12));
  border: solid 1px black;
  background-color: black;
  gap: 1px;
}

.grid-cell {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="layout">
  <div class="header">Header</div>
  <div id="global-grid" />
</div>